How to set value from AngularJS controller

Question

I have the following element

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search  placeholder-icon"></i>
    <input type="text" ng-model="searchTerm" >
  </label>
</div>

The element searchTerm can be written directly in the input field, or it can be added from the controller

<a class="item item-icon-right search-history ng-binding" ng-repeat="item in history" ng-click="insertSearchValue(item)">
        a search term
      </a>

in Controller :

$scope.insertSearchValue = function(historyItem){
      $scope.searchTerm= historyItem.searchTerm;
}

The click on insertSearchValue works only at first, if i write something in the input field and remove it, the click doesn't change the value anymore.

Even though the value of $scope.searchTerm is actually changed.

I'm assuming this is something related to the 2 way binding of Angular, but i tried everything related : ( $apply, ngValue,$setViewValue...) still same issue.

Thanks for any hint.

What are you expecting to happen? Currently, you're `ng-repeating` the phrase "a search term", and when you click on it, you want it to add in whatever is in the `item` object which is already in your `history` array (i.e., add a duplicate, never anything new). You're not calling `insertSearchValue()` on your textbox (which would be `insertSearchValue(searchTerm)` — Tom, Dec 15 '15 at 13:37
What if you put `searchTerm` inside another object in scope? E.g. `$scope.search.searchTerm` (remember to create it first). Update your ng-model accordingly and change assignment to `$scope.search.searchTerm = historyItem.searchTerm;`. `ng-repeat` creates a child scope, and that can be the issue. — scareddragon, Dec 15 '15 at 14:14
"a search term" is the value i took it from chrome since the code is more complex :). InsertSearchValue is being called correctly, that's not the problem — Dany Y, Dec 15 '15 at 16:30

jyrkim · Answer 1 · 2015-12-15T15:15:09.250

Like suggested by Tom, I added an array support for your code:

edit Now there is a $scope.history array for listing old searches, so the $scope.searchTerm can be used for the search input field alone. I hope this helps :-)

var app = angular.module('myApp', [])
  .controller('ExampleController', ['$scope',
    function($scope) {

      //array for history items
      $scope.history = ["Books", "CD", "DVD"];

      $scope.insertSearchValue = function(historyItem) {
        $scope.searchTerm = historyItem;
      }

      $scope.addNewHistoryItem = function() {
        $scope.history.push($scope.searchTerm);
        this.clear();
      }

      $scope.clear = function() {
        $scope.searchTerm = "";
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="ExampleController">

  <div class="list list-inset">
    <label class="item item-input">Search
      <i class="icon ion-search  placeholder-icon"></i>
      <input type="text" ng-model="searchTerm">
    </label>
    <button type="button" ng-click="addNewHistoryItem()">Add new/Search</button>
    <button type="button" ng-click="clear()">Clear input</button>
  </div>
  
  <br>

  Old searches:
  <ul ng-repeat="item in history">
    <li>
      <a class="item item-icon-right search-history ng-binding" ng-click="insertSearchValue(item)" href="javascript:void(0)">
       {{item}}
      </a>
    </li>
  </ul>
</div>

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

You should use dot when you use ng-model ng-model="data.searchTerm". Have a look here

edited May 23 '17 at 10:34

Community

1
1

answered Dec 15 '15 at 15:43

Joe Hany

1,015
1
8
14

How to set value from AngularJS controller

2 Answers2