使用理解表达式的自定义指令

Question

我在Python上花了很多时间，所以我真的很喜欢Angular的ngOptions中的comprehension_expression语法。

但是我想在其他输入中使用这种语法，例如ng-list 。 例如，我有一个不平凡的列表slug对象：

$scope.slugs = [
  {id:  1, name: 'angular-directives'},
  {id: 23, name: 'composing-your-very-own-angular-directives'},
  {id: 70, name: 'directives-in-angular-js'},
];

我想用一个输入来编辑名称，只为新的子弹创建具有name属性的纯对象。 但是， <input ng-list ng-model="slug.name for slug in slugs">不起作用。

由于开箱即用的语法不起作用（并且我真的不希望如此），如何在自定义指令的范围内使用comprehension_expression语法？

Answer 1

NgModel指令将元素绑定到作用域上的属性，它不支持理解表达式。 如果要使用“ ng-list”在输入字段中编辑名称，则需要创建一个包含所有名称值的数组。

然后创建一个“ newSlugs”数组来收集具有新名称的对象。 通过在每个子弹中注册$ watch观察器来更新对象更新后的名称。

$scope.slugs=[{id:1,name:'angular-directives'},{id:23,name:'composing-your-very-own-angular-directives'},{id:70, name:'directives-in-angular-js'}];
$scope.names=[];  //for ng-list
$scope.newSlugs = [];  

//loop through every element in array slugs
$scope.slugs.forEach(function(ele,index,array){
    //for ng-list
    $scope.names.push(ele.name);
    //create a new obj with one attribute 'name'
    $scope.newSlugs.push({name:ele.name});
    //register observer to every slug, update the name of obj in newSlugs once user had updated the name
    $scope.$watch("names["+index+"]",function(newValue,oldValue){
        $scope.slugs[index].name=newValue;
        $scope.newSlugs[index].name=newValue;
    });
});

顺便说一句，这是一个“更新”功能...我想您可能需要防止用户通过插入分隔符来创建新名称。

这是一个jsfiddle演示 。

希望这对您有帮助。