Austin
Austin

Reputation: 3080

Keeping track of value from select - AngularjS

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

Answers (1)

tymeJV
tymeJV

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

Related Questions