Question

我在Python上花了很多时间，所以我非常喜欢Angular＆＃39; 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'},
];

我想用单个输入编辑名称，创建只有新slug的name属性的普通对象。但是，<input ng-list ng-model="slug.name for slug in slugs">无效。

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

Answer 1

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

然后创建一个＆＃34; newSlugs＆＃34;用新名称收集对象的数组。通过向每个slug注册一个$ 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;
    });
});

顺便说一下，这是一次＆＃34;更新＆＃34; function ...我想也许你需要阻止用户通过插入分割符来创建一个新名称。

这是jsfiddle demo。

希望这对你有所帮助。

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

1 个答案: