角JS選擇納克選項

Question

我有一個代碼

app.controller('SelectCtrl', ['$scope', '$routeParams', '$http', '$q', 
    function($scope, $routeParams, $http, $q) { 

    var deferred = $q.defer(); 
    $http.get('json/newjson.json').success(function(responce) { 
     deferred.resolve(responce); 
    }); 

    deferred.promise.then(function(data) { 
     $scope.values = data; 
     $scope.recepients = [20, 23]; 
     $scope.ids = _.pluck($scope.values, "id"); 
     $scope.free = _.difference($scope.ids, $scope.recepients); 
     recalc(); 
    }); 


    function recalc() { 
     $scope.recepients.forEach(function(v, index) { 
      $scope.vals[index] = []; 
      $scope.ids.forEach(function(val, i) { 
       if (_.indexOf($scope.free, val) > -1 || val === $scope.recepients[index]) { 
        $scope.vals[index].push($scope.values[i]); 
       } 
      }); 
     }); 
    } 

    $scope.add = function() { 
     if ($scope.recepients.length < $scope.values.length) { 
      $scope.recepients.push($scope.free.shift()); 
      recalc(); 
     } 
    }; 

    $scope.remove = function(index) { 
     $scope.recepients.splice(index, 1); 
     $scope.free = _.difference($scope.ids, $scope.recepients); 
     recalc(); 
    } 

    $scope.change = function() { 
     $scope.free = _.difference($scope.ids, $scope.recepients); 
     recalc(); 
    }; 

    $scope.vals = []; 
}]); 

和HTML視圖

<table class="table"> 
    <tr data-ng-repeat="recepient in recepients"> 
    <td class="col-md-8"> 
     <select class="form-control" data-ng-model="recepients[$index]" data-ng-change="change()" data-ng-options="type.id as type.name for (key , type) in vals[$index]"></select> 
    </td> 
    <td> 
     <button class="btn btn-danger" data-ng-click="remove($index)"><span class="glyphicon glyphicon-remove"></span>remove</button> 
    </td> 
    </tr> 
</table> 
<button data-ng-click="add()" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>add</button> 

如果我按下按鈕可以添加一個行被添加到未使用的選項。鉻是鍍鉻的工作 它工作正常，但在IE9如果我添加行和改變她，以前的選項也發生了變化 這裏工作示例http://run.plnkr.co/plunks/43cXzghuFAFkbr2xW75e/#/

Answer 1

我不會綁定到文字中的數組。

用對象填充數組，也許只是有一個值域。 {value: 3}我沒有測試它，但是這應該可以解決您的問題。

更好的是，每個指令都有自己的範圍。在指令返回塊，a.k.a選項中設置scope: true。

https://docs.angularjs.org/guide/directive

How to prevent that a scope is shared among directives n Angular?