在AngularJS中匹配來自不同作用域的值

我試圖根據類別的屬性將類應用於元素，同時與用戶也可以創建的動態類別列表進行交互。在AngularJS中匹配來自不同作用域的值

分類數組：

$scope.categories = [{ 
    category: "work", 
    id: 1 
    }, { 
    category: "life", 
    id: 2 
    ];

託多斯陣列：

$scope.todos = [{ 
     name: "Lift Up Hats", 
     category: "life", 
     date: "tomorrow" 
    }, { 
     name: "Wash the Horse", 
     category: "work", 
     date: "tomorrow" 
    }];

我所有效地希望做的是：

A）環路一切待辦事項陣列英寸到目前爲止，這樣做是這樣的：

<li class="{{todo.category}}-item" ng-repeat="todo in todos | orderBy: 'completed'">

然而，這取決於類被稱爲像「生活項目」，「工作項目」等，我想用的ID的類別陣列英寸B）如果'擡起帽子'具有'生命'類別，則從類別數組中爲其分配生命類別的ID。例如，生活會導致「1項目」，工作會導致「2項目」等

我已經研究使用.map函數爲此，但它似乎我將不得不重構數組在整個應用程序中被操縱的方式。

一些援助/建議將不勝感激。

TL; DR：我想將一個類應用於從一個數組循環的ng重複項，其中該類是另一個數組中屬性匹配的數組中的一個屬性。

來源

2016-03-23 Jackanapes

您可以使用過濾器來提供查找

NB：我偷了過濾器「fromNative」的地方我不remenber很遺憾不爲

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    
 
    $scope.categories = [{ 
 
    category: "work", 
 
    id: 1 
 
    }, { 
 
    category: "life", 
 
    id: 2 
 
    } 
 
    ]; 
 
    
 
    $scope.todos = [{ 
 
    name: "Lift Up Hats", 
 
    category: "life", 
 
    date: "tomorrow" 
 
    }, { 
 
    name: "Wash the Horse", 
 
    category: "work", 
 
    date: "tomorrow" 
 
    }]; 
 
}); 
 

 
app.filter('fromNative', function() { 
 
    return function (native, options, matchField, valueField) { 
 
     if (options) { 
 
      for (var i = 0; i < options.length; i++) { 
 
       var o = options[i][matchField]; 
 
       if (o === native) { 
 
        return options[i][valueField]; 
 
       } 
 
      } 
 
     } 
 
     return ''; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ul ng-app="myApp" ng-controller="MainCtrl"> 
 
    <li ng-repeat="todo in todos | orderBy: 'completed'"> 
 
    with {{todo.name}} my lookup is <b>{{ todo.category | fromNative : categories : 'category' :'id' }}</b> 
 
    </li> 
 
</ul>

提供學分

編輯我已經取代我的待辦事項以符合您的樣本

來源

2016-03-23 15:02:29

這工作完美！謝謝。我不得不回去弄清楚它是如何工作的，但是在我的知識上，在過濾器方面存在嚴重的缺陷。 – Jackanapes

以下jQuery代碼可以幫助你：

angular.forEach($scope.todos, function(i, todoOb){ 
    angular.forEach($scope.categories, function(cat_i, catOb){ 
     if(todoOb.category == catOb.category){ 
      todoOb.id = catOb.id; 
     } 
    }); 
});

HTML

<li class="{{todo.id}}-item" ng-repeat="todo in todos | orderBy: 'completed'">

這將從類別添加正確的鍵TODOS數組對象的元素。

來源

2016-03-23 14:40:27

欣賞答案！不知道我是否想爲另一個函數加載另一個庫到項目中，但我會研究這個的一個vanilla JS實現。：）謝謝！ – Jackanapes

我假設你正在使用'jquery'結合角度。我也完成了同樣的工作也可以在Javascript中完成。 –

AngularJS擁有唯一的jQueryLite庫，您可以使用.forEach函數：https：//docs.angularjs.org/api/ng/function/angular.forEach –

在AngularJS中匹配來自不同作用域的值

回答

相關問題