無法申請JSON對象過濾器的角度JS與NG選項

Question

我有這樣的json副主題：

[{ 
    "id": "200", 
    "topicID": "20", 
    "name": "Support for project hosted by ncegitref1" 

}, 
{ 
    "id": "201", 
    "topicID": "20", 
    "name": "Support for project hosted by rndwww (Stash)" 
}, 
{ 
    "id": "210", 
    "topicID": "120", 
    "name": "Upload SSH key" 
}] 

和我的JavaScript是這樣的：

$http.get(urlsub).success(function(response) { 
     $scope.subtopics = response; 
     console.log($scope.subtopics); 
    }); 

$scope.selectedTopic = {}; 
$scope.TopicChanged = function(topic) { 
    $scope.displayTopicDescription = true; 
    $scope.topicDesc = topic.description; 
    $scope.selectedTopic.topicID = topic.id; 
    $scope.sub = topic.id ; 
    console.log($scope.sub); 
}; 

我的控制檯打印值20.子主題存儲上面的json。我在NG選項時使用此過濾器使用的過濾器下面，

<select id="selectSubtopic" ng-model="topicsPopulate" ng-disabled="!topicsPopulate" ng-options="subtopic.name for subtopic in subtopics | filter:{topicID:sub}:true "> 
    <option value="" disabled selected>Select Subtopic</option> 
</select> 

，我看到在下拉列表中，而不是前兩個所有三個subtopic.name。我基本上想要根據我用$ scope發送的topicID來過濾子主題。

Answer 1

那是因爲AngularJS不尋求平等的價值觀，過濾器搜索包含值（20），並在所有對象JSON包含20個topicId，但你可以創建一個像自定義過濾器：

JS：

angular.module('myApp', []) 
.controller('ControllerFirst',function($scope){ 
$scope.subtopics = [{ 
    "id": "200", 
    "topicID": 20, 
    "name": "Support for project hosted by ncegitref1" 

}, 
{ 
    "id": "201", 
    "topicID": 20, 
    "name": "Support for project hosted by rndwww (Stash)" 
}, 
{ 
    "id": "210", 
    "topicID": 120, 
    "name": "Upload SSH key" 
}]; 
$scope.sub= 20; 
$scope.selectedTopic = {}; 
$scope.customFilter = function(topicID) { 
    return function(subtopic) { 
     return subtopic.topicID == topicID; 
    } 
} 
}); 

HTML：

<div ng-controller="ControllerFirst"> 
<select id="selectSubtopic" ng-model="topicsPopulate" ng-options="subtopic.name for subtopic in subtopics | filter:customFilter(sub)"> 

    <option value="" disabled selected>Select Subtopic</option> 
</select> 
</div> 

在這裏，我搗鼓這個例子：https://jsfiddle.net/javierif/rk04nL90/

希望這有助於U; d

Answer 2

這是一個解決方案的工作plunk。由於你的代碼片段沒有顯示它們是如何定義或初始化的，所以我不得不做出與主題相關的一些假設。

代碼的主要變化是過濾器。不是基於TopicChanged（）中設置的範圍變量（$ scope.sub）進行過濾，而是將其更改爲基於與我認爲是主題選擇相關的ng模型進行過濾。

所以，現在你的標記應該是這樣的：

HTML

<select ng-model="selectedTopic" ng-options="topic.description for topic in topics" ng-change="TopicChanged()"> 
    <option value="" disabled selected>Select a Topic</option> 
</select> 

<select id="selectSubtopic" ng-model="topicsPopulate" ng-disabled="!selectedTopic" ng-options="subtopic.name for subtopic in subtopics | filter: {topicID: selectedTopic.id} :true "> 
    <option value="">Select Subtopic</option> 
</select>