Passing data to model inside the ng-click

Question

I am displaying all of the articles from the database and I've created a simple text search for it.

<input ng-model="searchText" placeholder="Search for articles" class="search-text">

And I am filtering the content from the searchText

<section class="articles" ng-repeat="contentItem in content | filter:searchText">

Now what I'm trying is to have buttons with the categories and tags from my database and to be able to filter the content based on the button values.

<span ng-repeat="category in categories">
  <button ng-click="searchText = '{{category.local.name}}'" class="btn btn-primary">{{ category.local.name }}</button>
</span>

The code above is not working but for example if I'm taking out the ng-repeat and type all the categories myself it will work:

<span>
  <button ng-click="searchText = 'some text'" class="btn btn-primary">Some text</button>
</span>

My question is how can be the good way to pass the content from the search input and buttons to the filter method?

Here is the full code:

<div class="container">
 <h1>List of articles</h1>
<section class="search-items">
<input ng-model="searchText" placeholder="Search for articles" class="search-text">
<div class="row">
  <div class="col-sm-6">
    <h6>Search based on categories:</h6>
    <span ng-repeat="category in categories">
      <input type="button" ng-click="searchText = '{{ category.local.name }}'" value="{{ category.local.name }}" class="btn btn-primary">
    </span>
  </div>
  <div class="col-sm-6">
    <h6>Search based on tags:</h6>
    <span ng-repeat="tag in tags">
      <input type="button" ng-click="searchText = '{{tag.local.name}}'" value="{{ tag.local.name }}" class="btn btn-primary">
    </span>
  </div>
</div>
</section>
<section class="articles" ng-repeat="contentItem in content | filter:searchText">
  <article class="well">
    <h3>{{ contentItem.local.title }}</h3>
    <p>{{ contentItem.local.content }}</p>
    <span><b>Article author: {{ contentItem.local.author }}</b></span><br/>
    <span class="label label-primary">{{ contentItem.local.categories.category }}</span>
    <span class="label label-primary">{{ contentItem.local.tags.tag }}</span>
  </article>
 </section>
</div>

Not clear what's being asked. You say "I could see that if i remove the ng-repeat and type by myself some text it will work" can you elaborate on this. Regarding the ng-click it takes an `angular expression` https://docs.angularjs.org/guide/expression which is parsed against the scope so no need for the {{}} interpolation braces in there. — shaunhusain, May 25 '16 at 01:18
I have edited the question, I hope I am more precised now. Thank you for trying to help! - Also I've tried also without {{}} but as far as I can see, I cannot pass the variable inside of the ng-repeat. — NinetyHH, May 25 '16 at 01:27
You can just using `ng-click="searchText = tag.local.name"` then if you have `
{{searchText|json}}
` in the view you should see that searchText gets updated with the value of tag.local.name as parsed against the scope for the repeated element. I'll try to make a minimal sample answer. — shaunhusain, May 25 '16 at 01:47
Thanks for fixing up the question too. Was a lot easier to read through after the edits. — shaunhusain, May 25 '16 at 01:57

score 0 · Answer 1 · edited May 23 '17 at 12:22

angular.module('myApp', [])
.controller('ThingsController', function(){
  var ctrl = this;
  ctrl.things = ['thing 1', 'thing 2', 'another thing']
  ctrl.searchText = "something"
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ThingsController as thingCtrl">
<div ng-repeat="thing in thingCtrl.things">
  <button ng-click="thingCtrl.searchText = thing">{{thing}}</button>
</div>

<pre>{{thingCtrl.searchText}}

Above snippet shows it working also using controller as syntax. Typically you don't want to use the $scope as though it's your model you want it to point to your model otherwise you may run into some weird prototypical inheritance problems. As in $scope.myModel = {someProp:4} instead of $scope.someProp = 4 using the controller as syntax also avoids this issue.

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Passing data to model inside the ng-click

1 Answers1