Question

我对一个名为on-change的元素有一个指令。这个想法是当选定的值发生变化时，它会保存在范围变量中，然后另一个元素会将其选中。

我的问题是，如果上面的元素是静态的，上面的工作正常，但如果我使用ng-repeat，则onchange停止工作。

<select on-change="myvar" ng-repeat="(key, value) in dataset">
   <option value="{{key}}">{{value.name}}</option>
</select>

这是我的onchange指令：

.directive('onChange', function() {    
        return {
            restrict: 'A',
            scope:{'onChange':'=' },
            link: function(scope, elm, attrs) {            
                scope.$watch('onChange', function(nVal) { elm.val(nVal); });            
                elm.bind('blur', function() {
                    var currentValue = elm.val();                
                    if( scope.onChange !== currentValue ) {
                        scope.$apply(function() {
                            scope.onChange = currentValue;
                        });
                    }
                });
            }
        };        
    })

关于如何克服这个问题的任何想法？

由于

Answer 1

您可以使用ng-model和$watch来捕捉任何更改。为了重复使用它，您实际上可以将代码略微修改为$watch ngModel。

（我只是猜测你打算用多个选项制作一个select，而不是多个select一个选项，所以我相应地更改了这个<） / p>

<select ng-model="myvar" on-change>
   <option ng-repeat="(key, value) in dataset" value="{{key}}">{{value.name}}</option>
</select>

新链接功能：

link: function(scope, elm, attrs) {            
    scope.$watch(attrs.ngModel, function (newVal, oldVal) {
        if(newVal !== oldVal) {
            //Change happened, react accordingly
        }
    });
}

请参阅我的类似答案here

Answer 2

我建议你使用ngOptions。在你的情况下，它应该看起来像：

<select ng-model="myVar" ng-options="key as value.name for (key, value) in dataset"></select>

正如有些人在我之前建议的那样，使用$watch来监控模型中的变化。

$scope.$watch('myVar', function(newValue, oldValue) {
   //whatever
});

请参阅一个简单示例here。

Angular-js：带有属性指令的select元素上的ng-repeat

2 个答案: