AngularJS - 在下拉列表中设置选定值，其中值与另一个对象匹配

Posted 2021-03-27

请看下面我的plunkr

https://plnkr.co/edit/8xjmL9?p=preview

这就是我的$ scope.data的样子

$scope.data = [  
   {  
      "projectedStart":"2016-12-14T00:00:00"     
   },
   {  
      "projectedStart":"2017-01-04T00:00:00"      
   },
   {  
      "projectedStart":"2017-01-11T00:00:00"      
   }   
];

这就是我的scope.possibleDates的样子

$scope.possibleDates = [  
   {  
      "projectedStartDate":"2016-12-07T00:00:00",
      "dateName":"December - Week 1"
   },
   {  
      "projectedStartDate":"2016-12-14T00:00:00",
      "dateName":"December - Week 2"
   },
   {  
      "projectedStartDate":"2016-12-21T00:00:00",
      "dateName":"December - Week 3"
   },
   {  
      "projectedStartDate":"2016-12-28T00:00:00",
      "dateName":"December - Week 4"
   },
   {  
      "projectedStartDate":"2017-01-04T00:00:00",
      "dateName":"January - Week 1 (20/10)"
   },
   {  
      "projectedStartDate":"2017-01-11T00:00:00",
      "dateName":"January - Week 2 (20/10)"
   }
]

这是我的选择看起来很明显错误

<table class="table table-bordered table-hover">
   <thead>                  
      <tr>
        <th >Projected Date</th>
     </tr>
   </thead>
    <tbody>
        <tr ng-repeat="d in data">
            <td>
                <select class="form-control"
                            ng-model="selectedValue"
                            ng-init="selectedValue = {{data.projectedStart == dates.projectedStartDate}}"
                            ng-options="dates.dateName for dates in possibleDates">
                 </select>
            </td>
        </tr>                                               
    </tbody>
</table>

我试图显示一个下拉列表，其中包含所有$ scope.possibleDates的dateName属性的列表，这很好，但我想选择与$ scope.Data中的'projectedStart'匹配的值

答案

我不认为需要使用ng-init定义新模型，使用方式也是错误的。您需要绑定要通过该字段更新的模型。在这种情况下，它是projectedStart数组的data属性。因此，将其设置为下拉模型。现在你需要设置ng-option，这样当选择dateName时，projectedStart属性应该作为值。以下代码将是一个很好的选择。

<select class="form-control"
                        ng-model="d.projectedStart"
                        ng-options="dates.projectedStartDate as dates.dateName for dates in possibleDates">
                  </select>

我更新了plunker - https://plnkr.co/edit/Hd2UBec1ULK6XQ2H26hC?p=preview

另一答案

只需将您的代码更改为：

<select class="form-control"
      ng-model="selectedValue">
  <option ng-repeat="dates in possibleDates" selected="{{d.projectedStart == dates.projectedStartDate}}">{{dates.dateName}}</option>
</select>

你的{{}}里面不需要ng-init，因为它是由Angular本身评估的。

此外，对于要选择的项目，您需要将值设置为其中一个日期，您的评估将selectedValue设置为true或false。

另一答案

我认为你不需要把{{}}放在ng-init表达式中。此外，您需要使用d而不是data，因为您在d in data语句中定义了ng-repeat

试试这个：

ng-init = "selectedValue = (d.projectedStart == dates.projectedStartDate)"

我想这对你有用。

替代方案

您可以尝试使用此代替您的select语句。

<select class="form-control" ng-model="selectedValue">
    <option ng-repeat="dates in possibleDates" ng-selected = "d.projectedStart == dates.projectedStartDate">dates.dateName</option>
</select>

另一答案

<select class="form-control agentValue" style="padding: unset;" ng-model="selectedAgent[$index]" ng-change="setAgentID($index)">
    <option value="">Select Agent</option>
    <option ng-repeat="aList in agentlist" value="{{aList.LOGIN_ID}}">{{aList.FIRST_NAME}} {{aList.LAST_NAME}}</option>
</select>

这是我写的html代码（上面是html）

for(var i= 0; i< $scope.datalist.length; i++){
    $scope.selectedAgent[i] = $scope.datalist[i].COLLECTION_AGENT_ID;
}

这个我的控制器代码对我来说很好