Question

我创建了一个具有独立范围的指令，并且出于某种原因，在ng-repeat中，除了ng-repeat中的范围之外，我无法访问任何范围值。所以在这里，我想在ng-options指令中访问隔离的范围属性authorityList，但我的下拉列表没有被填充。

(function() {

 var app = angular.module('garageManagement');

app.directive('userManagement', function () {
  return {
      restrict: 'E',
      templateUrl: 'app/directives/userManagementWidget/userManagementTemplate.html',
      scope: {
          users: "=",
          authorityList: "=",
          acceptUser: "&",
          rejectUser: "&",
          selectecAuthroity:"=",
      }
   };
 });

 }());

模板

<div class="form">
<div class="col-12" ng-repeat="user in users ">
    <div id="{{user.Id}}" class="row">
       <label for="example-text-input" class="col-3 col-form-label">{{user.UserName}}</label>
       <div class="col-3">
     // issue here, authorityList returning undefined
          <select class="form-control"  ng-options="item in authorityList" ng-change="storeSelectionUserType(user.Id)" ng-model="user.StaffType"></select>
       </div>
       <div ng-hide="user.IsApproved" class="col-3">
          <button type="button" ng-click="acceptUser(user.Id)" class="btn btn-primary col-3">Accept</button>
       </div>
       <div ng-hide="user.IsApproved" class="col-3">
            <button type="button" ng-click="rejectUser(user.Id)" class="btn btn-primary col-3">Reject</button>
       </div>
   </div>
</div>

用法

    <user-management users="users" authorityList="authorityList" acceptUser="acceptUser" rejectUser="rejectUser" storeSelectionUserType="storeSelectionUserType" selectecAuthroity="selectecAuthroity"></user-management>

Answer 1

请参阅以下示例。

    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
 </select>

angular.module('ngrepeatSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    model: null,
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ]
   };
}]);

Answer 2

需要在ng-options中分配关键字和值。像这样改变它

<select class="form-control"  ng-options="item.id as item.name for item in authorityList" ng-change="storeSelectionUserType(user.Id)" ng-model="user.StaffType"></select>

angularjs ng-options没有填充我的下拉列表

2 个答案: