Question

我有一张预订表，其中最后一个字段的状态为下拉列表

<td><select id="selectID" ng-selected="{{data.status}}">
                               <option value="1">New</option>
                               <option value="2">To Be Approved</option>
                               <option value="3">Cancelled</option>
                               <option value="4">Rejected</option>
                               <option value="5">Approved</option>
                               <option value="6">On The Way</option>
                               <option value="7">Delivered</option>
                               <option value="8">Ongoing</option>
                               <option value="9">Checkedout</option>
                               <option value="10">Completed</option>
                               <option value="11">Invoice Pending</option>
                               <option value="12">Invoice Sent/Payment Pending</option>
                               <option value="13">Green</option>

                           </select> </td>

我在JSON中收到状态值为1-12之间的数字。我想在加载表格时预先选择每个下拉列表。例如，如果JSON的状态为2，则在状态行中选择的默认值必须为“待批准”，依此类推。我看了很多，但我能找到的是用于填充select标签的ng-options，但是我没有在JSON中收到它们所以我在<td>标签中对其进行了硬编码行正在ng-repeat上工作。此外，我想到使用.val函数，但我想对于不同的行，我可能需要设置不同的ID。

Answer 1

使用AngularJS数据绑定ng-model

JSFiddle

HTML：

<div ng-app="myApp" ng-controller="dummy">{{data.status}}
    <td>
        <select id="selectID" ng-model="data.status">
            <option value="1">New</option>
            <option value="2">To Be Approved</option>
            <option value="3">Cancelled</option>
            <option value="4">Rejected</option>
            <option value="5">Approved</option>
            <option value="6">On The Way</option>
            <option value="7">Delivered</option>
            <option value="8">Ongoing</option>
            <option value="9">Checkedout</option>
            <option value="10">Completed</option>
            <option value="11">Invoice Pending</option>
            <option value="12">Invoice Sent/Payment Pending</option>
            <option value="13">Green</option>
        </select>
    </td>
</div>

JS：

angular.module('myApp', [])
    .controller('dummy', ['$scope', function ($scope) {

    $scope.data = {
        status: 2
    };
}]);

Answer 2

ng-selected适用于option代码而非select代码。

请参阅此代码段：

＆＃13;

angular.module('testApp', [])

.controller('homeCtrl', ['$scope', function($scope) {
	$scope.selectedItem = 3;
}])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
  <section ng-controller="homeCtrl">
    <select>
      <option ng-selected="selectedItem == 1" value="1">1</option>
      <option ng-selected="selectedItem == 2" value="2">2</option>
      <option ng-selected="selectedItem == 3" value="3">3</option>
      <option ng-selected="selectedItem == 4" value="4">4</option>
    </select>
  </section>
</body>

＆＃13;

根据收到的值预先选择下拉选择选项

2 个答案: