Consider the code given below :
<li ng-repeat="task in tasks track by $index" >
<input ng-model="task.completeStatus" ng-click="updateOnClick()"
type="checkbox"
style="margin-right: 20px;" />
<span class="{{task.completeStatus}}" ng-dblclick="editTaskMessage()"
contenteditable="false" ng-model="task.taskMessage"
ng-keydown="enterEdit()">
{{task.taskMessage}}
</span>
</li>
My problem is, how can I access the ng-model="task.completeStatus" in the controller...? ( I tried to access the value returned from the ng-model in the controller as $scope.task.completeStatus but gives an error as TypeError: Cannot read property 'completeStatus' of undefined ) and can the ng-model directive be used to overwrite or modify currently existing values in the tasks array inside the controller.??
In your first question, you are getting the error because you are trying to access the property of array inside array without its index.
You can access the "task.completeStatus" in the controller by passing the $index of the array in tasks as below
ng-click="updateOnClick($index)"
And in the controller, you can access the "task.completeStatus" as below
function updateOnClick(index){
var completeStatus = $scope.task[index].completeStatus);
}
Yes, you can modify the values present in task array in the controller, as ng-model provides two way binding of variables which means that you can change the value of the angular variable from the controller as well as from HTML.
Related
The input field value doesn't get the assigned ng-value.The dragItms object holds the value to be bound for the given col key.
When isSaveTemplt = true, collection and columns gets updated after api call.
The functionality that I implement is such that dragItems object changes on clicking tabs and the said api is called for getting the data for tbody element.
<th ng-if="isSaveTemplt && collection.length>0 && columns.length>0" ng-
repeat="col in columns track by $index">
<input class="filterStyle" type="search" placeholder="search
by {{col | translate}}" st-search="{{col}}" ng-value={{dragItms[col]}} />
</th>
I didn't get your question clearly, Maybe more code and explanation is needed. Unfortunately I dont have enough reputation to comment. But what I feel is the issue of using ng-if. Whenever ng-if is used it creates a child scope. So any element inside has a different scope. To access parent scope use $parent. So you access will be something like this {{$parent.dragItms[col]}}. $parent is parent scope.
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.
I need to show/hide a tab based on the value of JSON, i.e. If the value of Region (In JSON, 'Region':'US') is equal to US in at least one of the items within JSON response I should show the tab, if not hide...
I'm using the following code to check if at least the item.region has US value, I'm able to read the values from the JSON but when I try to set the value to true to a variable inside the tag I don't get the value in the variable
<span ng-repeat="item in res.objects" ng-if="item.region === 'US'">
// Set myVariable = true
</span>
And after the variable has been set, display the div with ng-show and the value of the bool variable.
<div class="action-tab" ng-click="res.viewUS()" ng-show="<valueOfBoolVariable">
View US
</div>
Is this good approach to accomplish this? Any idea would be appreciated.
try using ng-init it allows you to evaluate an expression of your current scope
<span ng-repeat="item in res.objects" ng-if="item.region === 'US'">
<!-- Evaluate your variable -->
<div ng-init="evaluate(item)"> </div>
</span>
In your controller
$scope.evaluate = function(item){
//you do the job
}
i have the below ng-repeat
<span ng-repeat = "x in levels">
<input id="{{x}}" type="checkbox" ng-model="Filter.level.{{x}}" ng-true-value="{{x}}" data-ng-false-value=""/><label for="{{x}}">{{x}}</label>
</span>
im facing issue with the value of ng-model directive
i tried to use it many ways but it didnt work:
ng-model="Filter.level.{{x}}"
or
ng-model="'Filter.level.'+{{x}}"
or
ng-model="'Filter.level.'+'{{x}}'"
or
ng-model="'Filter.level.level'+{{$index}}"
its work only when i use it like ng-model="Filter.level.level1"
but i need the value to be dynamic from ng-repeat like Filter.level.level1, Filter.level.level2 ...
You should access object by index there with the help of [], you can't use {{}}(interpolation directive) inside ng-model
ng-model="Filter.level[x]"
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.