Question

我已经为选择输入创建了一个指令来选择userId。该模型从指令绑定到视图的其余部分。但是，当我从控制器设置id时，它似乎不会绑定到指令中的select输入。

控制器：

app.controller('MainCtrl', function($scope) {
  // set userId to willem's Id
  $scope.userId = 3;
});

指令：

app.directive('selectUser', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '='
    },
    controller: function($scope) {
      $scope.users = [{
        "id": 1,
        "name": 'Tupac'
      }, {
        "id": 2,
        "name": 'Biggie'
      }, {
        "id": 3,
        "name": 'Willem'
      }];
      },
    templateUrl: 'directive.html'
  };
});

的index.html

  <body ng-controller="MainCtrl">
    users:
  <select-user ng-model="userId"></select-user>

  userId = {{userId}}
  </body>

directive.html

<select class='form-control focus' ng-model="ngModel">
    <option value="">all users</option>
// doesn't bind from the controller. Supposed to show willem, instead of all users to start with.
    <option ng-Repeat="user in users" value="{{user.id}}">{{user.name}}</option> 
</select>

工作示例：http://plnkr.co/edit/c7eyoB

Answer 1

您应该使用ngOptions：

<select class='form-control focus' ng-model="ngModel" ng-options="user.id as user.name for user in users">
    <option value="">all users</option>
</select>

然后绑定将起作用。 请参阅updated plnkr

编辑，关于评论中的以下问题：

你可以解释一下，为什么它不能用ng-repeat？

您可以通过以下方式获得相同的视觉效果：

<select class='form-control focus' ng-model="ngModel">
  <option value="">all users</option>
  <option ng-repeat="user in users" value="{{user.id}}" ng-selected="user.id === ngModel">{{user.name}}</option>
</select>

即。我们添加了ng-selected="user.id === ngModel"。

但这有一些缺点。首先，您正在创建不需要的隔离范围。而且，绑定到选项的值是字符串，即您实际上会选择'1'，'2'或'3'而不是1，2或{{ 1}}。

指令中选择输入的双向绑定不起作用

1 个答案: