2015-02-11 93 views
0

我想要做的是有一個下拉選項「標籤」。當選擇一個標籤時,來自我的ng-repeat的項目將顯示或隱藏,具體取決於它們的某個標籤是否與所選標籤匹配。保持跟蹤選擇的價值 - AngularjS

我的問題是,我似乎無法獲得當前選定的標記值。

在我的控制器我有

// Items that are shown or hidden if the selected tag, matches one of theirs. 
$scope.items = [ 
    { 
     source: "../assets/images/FirstItem.png", 
     tags: ["All","App","Dat","Man"] 
    }, 
    { 
    source: "../assets/images/SecondItem.png", 
    tags: ["All","App"] 
    } 
    ]; 

    // All the possible tags (what populates the select/dropdown) 
    $scope.tags = [ 
    { 
     name:"All", 
     tag:"All", 
    }, 
    { 
     name:"Applications", 
     tag:"App" 
    }, 
    { 
     name:"Data Center", 
     tag:"Dat", 
    } 
    ]; 

    // Updates the currentTag, so I can filter the items. 
    $scope.newTag = function($scope) { 
    $scope.currentTag = $scope.selectedItem.tag; 
    }; 

    // Is the currently selected tag 
    $scope.currentTag = "All"; 

我的HTML

<select> 
    <option ng-repeat="tag in tags" ng-change="newTag()" ng-model="currentTag.tag">{{tag.name}}</option> 
</select> 
<div ng-repeat="item in items"> 
    <div class="small-12 columns"> 
     <img src="{{item.source}}" ng-show="somehow filter by currentTag" /> 
    </div> 
</div> 

所以我的問題是一個簡單的方法來跟蹤當前選定的標籤。或者從選擇區域,tag.tag。我一直在嘗試幾個類似的問題的例子,但似乎沒有任何工作對我來說,我認爲我缺少一些簡單的東西,因爲我對AngularJS仍然陌生。

我已經安裝好了,我總是打開改進/適當的編碼!

+1

使用'NG-options',不'<選項NG-repeat''<選擇NG選項=「標籤作爲tag.name的標籤in tag「ng-model =」currentTag.tag「ng-change =」newTag()「>' – tymeJV 2015-02-11 19:23:31

+1

謝謝!如果你把它折騰成一個答案,我會接受!此外,對於ng-repeat,在每個項目上放置一個ng顯示方式可以將它們過濾出來,就像我在上面放置的那樣? – Austin 2015-02-11 19:27:25

+0

發表了一個快速回答:D – tymeJV 2015-02-11 19:30:27

回答

1

您應該使用ng-optionsselect元素:

<select ng-options="tag as tag.name for tag in tags" ng-model="currentTag.tag" ng-change="newTag()"></select> 
+0

定時器到期時會接受!有關如何執行我的過濾問題的任何提示?只需使用ng-show之類的東西顯示每個元素或什麼? – Austin 2015-02-11 19:32:17

+0

@Austin - 或者'ng-show' - 或者在'ng-repeat'中使用實際的'filter' - 'ng-show'可能是更簡單的方法:'ng-show =「currentTag.tag = = item.tag「' – tymeJV 2015-02-11 19:38:06

+0

這也是我的想法,但是我的'item'可以有多個標籤。我不確定AngularJS是否有一些「包含」選項。由於使用上面的代碼不起作用,因爲'item.tag'是一個標籤數組。 – Austin 2015-02-11 19:51:11