Question

我在我的表中使用ng-repeate来构建行。在每一行中我都有选择。在每个选择中，我想根据我的$ scope.vehicles选择其中一个选项。

这是一个HTML：

<div ng-app="MyApp" ng-controller="MyController">
    <div id="vehicleDetails">
        <table id="tblVehicles">
            <tr>
                <th>Number</th>
                <th>Model</th>
            </tr>
            <tr class="vehiclesRepeat" ng-repeat="vehicle in vehicles">
                <td>{{vehicle.PlateID}}</td>
                <td>
                    <select required ng-model="vehicles.ModelID" id="vehicleModel" class="txtPersonalDetails" ng-options="m.description for m in models" >
                        <option value="">Select Value</option>
                    </select>
                </td>
            </tr>

        </table>
    </div>
</div>

这是JS：

angular.module('MyApp',[])
            .controller('MyController',function($scope) {

                $scope.vehicles=[{"PlateID":"55533322","ModelDescription":"OPEL","ColorDescription":"blue","ModelID":194,"ColorID":13},{"PlateID":"66688822","ModelDescription":"Mercedes","ColorDescription":"blue","ModelID":238,"ColorID":13}];

                $scope.models=[{"iD":35,"description":"BMV"},{"iD":193,"description":""},{"iD":194,"description":"OPEL"},{"iD":214,"description":"Toyota"},{"iD":215,"description":"Honda"},{"iD":238,"description":"Mercedes"},{"iD":260,"description":"Houndai"}];
                });

我构建了下拉列表，但我无法在每个下拉列表中设置选定的值。 JSFiddle：https://jsfiddle.net/ndprdffa/ 有人可以帮忙吗？谢谢！

Answer 1

使用此

<div ng-app="MyApp" ng-controller="MyController">
    <div id="vehicleDetails">
        <table id="tblVehicles">
            <tr>
                <th>Number</th>
                <th>Model</th>
            </tr>
            <tr class="vehiclesRepeat" ng-repeat="vehicle in vehicles">
                <td>{{vehicle.PlateID}}</td>
                <td>
                    <select required ng-model="vehicle.ModelDescription" id="vehicleModel" class="txtPersonalDetails" ng-options="m.description as m.description for m in models" >

                    </select>
                </td>
            </tr>

        </table>
    </div>
</div>

请参阅小提琴“https://jsfiddle.net/ndprdffa/1/”。

解释

正如docs所解释的那样，当您使用

等表达式时

label for value in array

选择框中显示的内容为label，绑定到ngModel的内容为value。所以，在你的表达中：

ng-model="vehicle.ModelDescription"

 ng-options="m.description for m in models"

m是models数组中的一个对象。如果您希望对象是在选择框中选择的对象，则您的ngModel应该是对此对象的引用，而不仅仅是值

或者，如果您希望ngModel包含字符串值vehicle.ModelDescription而不包含包含此值的对象，则表达式应为

ng-options="m.description as m.description for m in models"

如何在ng-repeat中设置每行中的选定值？

1 个答案: