AngularJS - 在Object中获取值的指令

Question

目前我正在使用这个for循环获取父级

angular.forEach(queryTicketCategories, function(category) {
    if(category.id === $scope.ticketCategory.parentId) {
        $scope.parent = category;
    }
});

请建议将返回的通用指令category.这queryTicketCategories是一个数组的对象.我想分配一个$scope.parent等于的数组$scope.ticketCategory.parentId

Html代码是

   <input type="text" ng-model="parent" 
   placeholder="{{'PARENT_CATEGORY' | translate}}" 
   typeahead="category as category.name for category in getTicketCategories($viewValue)" 
   typeahead-loading="loading" class="form-control"> 

Answer 1

对于您的情况,最好查看typeahead指令并最大限度地使用它.

http://angular-ui.github.io/bootstrap/#/typeahead

您可以将现有指令与回调一起使用,而不是创建自己的指令或服务, typeahead-on-select

typeahead-on-select($item, $model, $label) (Defaults: null) : 
A callback executed when a match is selected

这是我在不使用回调的情况下创建的示例.它使您可以从键入的内容中选择Google地址.

没有typeahead-on-select:http:
//plnkr.co/edit/GMnzod9MQZWxsKSuJUJu？p =preview

通过将所选地址更改为大写,以下步骤将更进一步.您可以在此回调中执行任何操作.

http://plnkr.co/edit/jaeSZdSKucMQgIF05KwD?p=preview

我使用此函数将所选地址更改为大写.

$scope.myFunc = function($item, $model, $label) {
    $scope.asyncSelected = $item.toUpperCase();
}

对于您的情况,您可以像下面这样做

$scope.myFunc = function(category) {
    if(category.id === $scope.ticketCategory.parentId) {
        $scope.parent = category;
    }
}

HTML

typeahead-on-select="myFunc($item)"

总之,您的用例和数据可能与我上面使用的示例不同,但主要方法是相同的.选择项目后会有回调,您可以使用回调更多地操纵数据控件typeahead-on-select.

Answer 2

如果我理解正确,您需要设置$scope.parent基于文本框中显示的对象$scope.ticketCategory.parentId

如果是这样,那么指令不是最好的方法.指令适用于影响视图的DOM操作或逻辑.但此功能与更新视图无关.只是视图绑定到$scope.parent,但如果您只是在代码中设置此对象,视图将自动更新(或者可能通过$apply()调用)

在这种情况下,您应该创建一个服务或过滤器以使此操作可重用(同时确保在找到匹配项后返回,因为之后不需要继续循环,对吧？)

但是,如果您坚持使用指令.您可以创建一个依赖于ng-model的指令,并根据其他属性(类别列表,所选的id)设置模型的值.所以用法可能就像这样

<input type="text" ng-model="parent" set-model="ticketCategory.parentId" set-model-list="queryTicketCategories" >

并且指令代码基本上会找到queryTicketCategories具有相同id 的对象,并ticketCategory.parentId使用该对象设置模型.

你可能应该在指令中设置一个标志左右只运行一次这个代码而不是每个$apply()循环.但是使用服务/过滤器方法,您可以随时设置parent值(可能在服务器请求之后或在回调中),因此我建议您使用它而不是指令.

Answer 3

angular.forEach(queryTicketCategories, function(category) {
    if(category.id === $scope.ticketCategory.parentId) {
        $scope.parent = category;
    }
});

从您的代码中,queryTicketCategories必须是一个对象数组.因为你不能循环一个对象.所以尝试使用,

angular.forEach(queryTicketCategories, function(category) {
    if(angular.equals(parseInt(category.id), parseInt($scope.ticketCategory.parentId)) {
        $scope.parent = category;
        return;
    }
});

这里确保queryTicketCategories采用格式,

[  { ... }
   , { ... }
   , { ... }
]

为了使category.id工作,我们使用parseInt,因为category.id或$ scope.ticketCategory.parentId可能在String中.

请注意,'==='和angular.equals()具有相同的实现.

Answer 4

您可以在 $scope.ticketCategory.parentId 上查看表达式。一旦 $scope.ticketCategory.parentId 的值发生更改，请将 $scope.parent 更新为具有相同 id 的类别。为了进行搜索，您可以创建过滤器。

例子 -

app.filter('getById', function() {
  return function(queryTicketCategories, id) {
    var i=0, len=queryTicketCategories.length;
    for (; i<len; i++) {
      if (queryTicketCategories[i].id == +id) {
        return queryTicketCategories[i];
      }
    }
    return null;
  }
});

 $scope.$watch('ticketCategory.parentId', function() {
        // do something here
       var found = $filter('getById')(queryTicketCategories, ticketCategory.parentId);
         console.log(found);
         $scope.parent = found;
    }, true);