Reputation: 3080
What I am trying to do is have a dropdown option with "tags". When a tag is selected, items from my ng-repeat will either show or hide depending on if one of their tag's matches the selected tag.
My problem is that I cannot seem to get the currently selected tag value.
In my controller I have
// 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";
My 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>
So my problem is a simple way to keep track of the currently selected tag. Or from the select area, the tag.tag. I have been trying several examples of similar questions but nothing seems to work for me, I assume I am missing something simple as I am still new to AngularJS.
I have setup this up poorly, I am always open to improvements/proper coding!
Upvotes: 0
Views: 330
Reputation: 104785
You should be using ng-options
with the select
element:
<select ng-options="tag as tag.name for tag in tags" ng-model="currentTag.tag" ng-change="newTag()"></select>
Upvotes: 1