指令中 select 输入的两种方式绑定不起作用

Question

我已经为 select 输入到 select 用户 ID 创建了一个指令。模型从指令绑定到视图的其余部分。但是，当我从控制器设置 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

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

could you please explain, why it is not working with 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".

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

指令中 select 输入的两种方式绑定不起作用

Two way binding of select input in a directive not working

javascript

angularjs

angularjs-directive

angularjs-scope