I'm trying to have a way to catch the change of a variable inside of an ngRepeat so that I can modify other properties. So I have this HTML:
<tr ng-repeat="variable in variables">
<td>
<div ng-if="....">
<textarea ng-model="variable.u_field_values" ng-change="onChange(variable)">
Whenever they modify the text in that textarea, I need to update another value on the current variable that's being used. The change method doesn't seem to ever get fired though.
Try putting the ng-change ahead of the ng-model:
<textarea ng-change="onChange(variable)" ng-model="variable.u_field_values">
I have found that order sometimes matters. No idea why, though..
Related
I have a simple ng-repeat to build a HTML list from a javascript array.
Each item can be moved using an input to get the new rank. This input is binded to a variable rank. This variable is initialized using the ng-init directive.
Code looks like this :
<li ng-repeat="item in ctrl.getItems()">
<div ng-init="rank = $index">
[$index: {{$index}}]
{{item}}<br/>
<label>
Move to
<input type="number" ng-model="rank"/>
</label>
<button type="button" ng-click="ctrl.moveItem($index, rank)">
Ok
</button>
</div>
</li>
At runtime, when I change the input value and click to the Ok button, function ctrl.moveItem is called and item is really moved in the ctrl.getItems() array.
So the ng-repeat is replayded and items appears in the new order.
BUT variable rank is not reinitialized and 2 items appears with the same rank.
The sample is here : https://jsfiddle.net/nlips/4ng34b7b/
My question is not so much about moving items in a list, but I need to understand how ng-init works in the context of ng-repeat.
I did not find anything on this subject in the AngularJS official documentation.
From AngularJS docs:
The ngInit directive allows you to evaluate an expression in the current scope.
Now. You are working with different scope.
You are using ngInit into the transcluded scope, overriding $scope.rank each time it repeats that portion of template.
If you want to persist your rank you should init it into the ngRepeat scope.
Try with:
<li ng-repeat="item in ctrl.getItems()" ng-init="rank = $index">
[$index: {{$index}}]
{{item}}<br/>
<label>
Move to
<input type="number" ng-model="rank"/>
</label>
<button type="button" ng-click="ctrl.moveItem($index, rank)">
Ok
</button>
</li>
EDITED ANSWER
Ok, i got it.
The ngInit expression is evaluated only when that part of template is going to be rendered into the DOM.
So, when the page is loaded for the first time your expression is fired and each rank is evaluated correctly.
But, when you make changes on an item that is already rendered, your template is not going to be rendered again, so your ng-init will not be fired.
If you want that ng-init to be executed again you have to remove the item from the DOM and then append it back, into the new position.
There are several alternatives to this approach, but i hope this clarifies what was going on.
Checkbox is not updating while
<input type="checkbox" ng-repeat="status in statuses"
checklist-model="task.status"
checklist-value="status">
In plunker
Isn't that 2 and 3(in plunker) are similar? Any Idea.
The problem is that you're using ng-repeat on the INPUT tag. You should put INPUT inside the ng-repeat. The checklist-model directive should have a separate scope.
All the official document example to use it within label. And my guess is that, the statement
<input type="checkbox"
checklist-model="task.status"
checklist-value="status">
is an iterating one. And if you add another iteration to it(ng-repeat) to it, it doesn't look logical.
This should be simple. For some reason, when using ng-model inside of ng-repeat it updates all ng-models inside that repeat loop.
Here's the code. Any ideas?
http://plnkr.co/edit/iAgrPwwBMilCyeReeLt9?p=info
Thanks.
Interesting!!!
Problem is that you are resetting row.field with an object from "$scope.columns"
in
<td>
<select ng-model="row.field" ng-options="column.title for column in columns"></select>
</td>
Here, row.field is reset with an object from $scope.columns and if you change this object in one row, as the other rows also use the same object, they repeat the same value.
You can change this model to row.field.type as
<td>
<select ng-model="row.field.type" ng-options="column.type as column.title for column in columns" ng-change="resetRow(row.field)"></select>
</td>
and define $scope.resetRow in your controller to reset other properties based on the field type.
Here is the updated plunker.
I would love to have a feature in ng-options to return a copy of
the object selected instead of the object reference to solve your problem though.
I am running this simple code with angularjs :
HTML :
<div ng-app ng-controller="AController">
<code>{{ itemsInArray }}</code>
<div ng-repeat="item in itemsInArray">
<input ng-model="itemsInArray[$index]" />
</div>
</div>
JavaScript :
function AController($scope) {
$scope.itemsInArray = ["strA", "strB", "strC"];
}
Binding appears to be working correctly when indexing into the array but after entering one character the input loses focus.
You can find the working code here on this fiddle : http://jsfiddle.net/QygW8/
I think this is happening because you are manipulating the same item which is iterated over ng-repeat. So ng-repeat sees a change in the item and re-runs the `ng-repeat which regenerates the items.
If you look at your fiddle html, you may notice this effect.
To make it work, one way you can do this
http://jsfiddle.net/cmyworld/CvLBS/
where you change your array to object array
$scope.itemsInArray = [{data:"strA"}, {data:"strB"}, {data:"strC"}];
and then bind to item.data
Try to change the model:
<div ng-repeat="item in itemsInArray">
<input ng-model="item" />
</div>
Even am an newbie to the angularjs, up-to my findings ng-repeat updates/repeats and recreates the whole HTML elements when there is an change in the model. Hence when a single character added to model causes ng-repeat to react and creates the all the HTML elements again which results to losing the focus.
This is an fiddle , In which u will be able to observer the changes with the model inside the ng-repeat and outside the ng-repeat.
Sorry i don't have the solution, Hope using ng-change apart of ng-model may help.
<input type="text" value="{{codes[0].code}}" ng-click="newNumber(0)" />
<input type="text" value="{{codes[1].code}}" ng-click="newNumber({{codes[1].id}})" />
The first ng-click event fires in my controller just fine but the second one does nothing.
I tried concat'ing as well ... is there some other way I should do this?
ng-click
The value of ng-click is already evaluated as an angular expression. As such, you don't need the {{ }}. Read http://docs.angularjs.org/guide/expression for more information. Take a look at the second example, it will help clarify this.
ng-model
Also, ng-model should be used for data-binding. For example, take a look at this jsfiddle: http://jsfiddle.net/bCpW9/8/ and the notes below.
<li ng-repeat="code in codes">
This loops through the codes collection which was defined in the controller. It creates a <li> for each element in the codes collection.
<input ng-model="codes[$index].code" />
Inside each <li>, an <input> for the current code is created. Each input is bound to it's corresponding element in the codes array by setting ng-model to it. For instance, type a new code into the first input field. It automatically updates the corresponding code model with what you typed, as you can see to the right.
I hope that helps.