angular js select ng-options

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>

如果我按下按钮来添加，就会在未使用的选项中添加一行。在chrome中它可以工作在chrome中，但是在IE9中如果我添加行并更改她，之前的选项也被更改了，这里是工作示例http://run.plnkr.co/plunks/43cXzghuFAFkbr2xW75e/#/

Answer 1

我不会绑定到数组中的文字。

用对象填充数组，可能只有一个value字段。{value: 3}我没有测试它，但是这应该可以解决你的问题。

更好的是，每个指令都有自己的作用域。在指令返回块中设置scope: true，也称为选项。

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

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