CODEWITHSUNDEEP
angularjs
J. Smith
J. Smith

Reputation: 13

ng-repeat with click modifying input

<input ng-model = "val">
<a href ng-click="val = 1"> val = 1 </a>
<div class="test" ng-controller="Ctrl">
<table>
<thead>
  <tr>
    <th>let</th>
    <th>num</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="thing in data">
    <td>
    <a href ng-click="val = 1">
      {{thing.let}}
    </a>
    </td>
    <td>{{thing.num}}</td>
  </tr>
</tbody>

Is there a way to make an input change based on a click in an ng-repeat? In this jsfiddle you can the input change with a click outside of an ng-repeat, but in the repeat it doesn't change the input.

http://jsfiddle.net/Hp4W7/2403/

Upvotes: 0

Views: 34

Answers (2)

Suneet Bansal
Suneet Bansal

Reputation: 2702

ng-repeat always make new scope for every iteration so if you change any primitive value inside ng-repeat ("val" in this case) then it will not refer to the actual "val". So to solve it, it should be a object type, for ex. obj.val something

Below is the working solution for this problem:

<div class="test" ng-controller="Ctrl" ng-init="obj.val=12345">

    <input ng-model = "obj.val">
    <a href ng-click="obj.val = 2"> val = 2 </a>

    <table>
            <thead>
                <tr>
                    <th>let</th>
                    <th>num</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="thing in data">
                    <td>
                        <a href ng-click="obj.val = thing.num">
                            {{thing.let}}
                        </a>
                    </td>
                    <td>{{thing.num}}</td>
                </tr>
            </tbody>
    </table>

<div>

Upvotes: 0

Andr&#233;s Esguerra
Andr&#233;s Esguerra

Reputation: 861

The problem is that you are setting the val property in a child scope created by ng-repeat.

The solution is to create a function that assigns this value to the parent scope:

$scope.changeVal = function(val){
    $scope.$parent.val = val;
}

And call it with ng-click="changeVal(1)"

Fiddle here: http://jsfiddle.net/nawd7jjc/

Upvotes: 1

Related Questions