javascript - 화면 - 자바스크립트 데이터 바인딩



지시문에서 선택 입력의 양방향 바인딩이 작동하지 않음 (1)

userId를 선택하기위한 선택 입력에 대한 지시문을 만들었습니다. 모델은 지시문에서 나머지보기로 바인드합니다. 그러나 컨트롤러에서 ID를 설정하면 지시문에서 선택 입력에 바인딩하지 않는 것 같습니다.

제어 장치:

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


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>

그러면 바인딩이 작동합니다. 업데이트 된 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' 또는 '3' 합니다.





angularjs-scope