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);

Answer 5

我不確定你想要什么，你必須更新你的答案並提供你想要的例子：我有A，我通過B，我期待C.

在任何情況下，這里都有一個簡單的指令，用於實現問題代碼中的邏輯。 這是jsfiddle 。

 var app = angular.module('HelloApp', []) app.controller('MyController', function MyController($scope) { $scope.myCategoryId = 11; $scope.myParentCategory; $scope.myCategories = [{ "id": 1, "name": "Tara" }, { "id": 11, "name": "Opal" }, { "id": 21, "name": "Whitfield" }, { "id": 31, "name": "Alta" }, { "id": 41, "name": "Tucker" }, { "id": 51, "name": "Sims" }, { "id": 61, "name": "Bradshaw" }]; }); app.directive('parentCategory', function() { return { restrict: "AE", scope: { categories: "=", categoryId: "=", parent: "=" }, link: function(scope, iElement, iAttrs, controller, transcludeFn) { scope.$watch('categoryId', findParent); function findParent() { var parent; angular.forEach(scope.categories, function(category) { if (category.id === scope.categoryId) parent = category; }); scope.parent = parent; } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="HelloApp"> <div ng-controller="MyController"> <label for="">CategoryId:</label> <input type="number" ng-model="myCategoryId"> <h3>Parent</h3> <pre>{{myParentCategory|json}}</pre> <parent-category categories="myCategories" category-id="myCategoryId" parent="myParentCategory"></parent-category> </div> </div> <!-- or you can use it like this, as an attribute <input type="number" ng-model="myCategoryId" parent-category categories="myCategories" category-id="myCategoryId" parent="myParentCategory"> -->