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]"
Related
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.
I am trying to have a span element show some $scope variable only if it is not null or empty.
I know i can accomplish this with only ng-model, but i don't understand they this won't work:
<span ng-show="x !== null" ng-model="x"></span>
or something similar to this.
ng-model is for two-way binding (as #MK Safi said above), which means its for elements that both display values and allow users to change those values. Probably not a <span/>...
If you're just looking to show the value of the model in the span, use ng-bind or expression syntax - {{ x }}
This way, ng-show should work properly to add the relevant CSS styles as x changes.
E.g.:
<span ng-bind="x" ng-show="x !== null"></span>
or
<span ng-show="x !== null">{{ x }}</span>
ng-model is used mostly for input, textarea, and select elements. It's not used on span, div, or p elements, etc.
From Angular documentation on ngModel
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
Yes, as MK Safi says ng-model is only used to bind inupts to $scope variables. This should work though:
<span ng-show="x !== null">{{ x }}</span>
Just use the templating engine to display the value in $scope.x
I want to do a two way data-binding from my view to controller. is it possible to do it using ng-model? it displays undefined in the controller though.
My code is something like:
<span ng-model="xyz">${user.group}</span>
and in my controller:
console.log($scope.xyz); //returns undefined.
What is the use of ng-model if I cannot use it this way?
Can anyone suggest a workaround for this?
Your problem is that the ng-model must be bound to an actual value. Spans do not have a value associated to them like inputs do so your $scope.xyz would never be set unless you set it in the scope. Even after that it would not do anything with the span. You also need double {{ and }} around everything, not single {}. You also do not need the $ symbol in the html.
Try :
<input type="text" ng-model="xyz" /> <span> {{xyz}} </span>
Got it working, I was missing to pass the argument to this function as a string, I simply had to do this using ng-bind on span tag like this:
ng-bind="getGp('${user.group}')"
Thanks everyone.
Learning angularjs at the moment, and I am confused as to how I can accomplish a task because I don't fully understand what ngModel is doing.
If I have a directive with two scope variables:
// An array of all my objects
$scope.allMyObjects
// The currently selected object from the array
$scope.selectedObject
and in the html
<span>{{ selectedObject.name }}</span>
<select id="select"
ng-model="selectedObject"
ng-options="object in allMyObjects">
</select>
This all works perfectly, when I select an object from the select, it updates the selectedObject on the scope and so the name of the currently selected object is displayed.
However, I don't want a select box, instead I want a list of all my objects with an editable name field, with a select button that I can use to select the specified object, so I came up with the following:
<div ng-repeat="object in allMyObjects">
<input class="object-name"
ng-model="object.name">
<a ng-click="loadObject(object)">Load</a>
</div>
and the loadObject() function on the scope:
function loadObject(object) {
$scope.selectedObject = object;
}
However, this doesn't work. I had assumed this was basically what ngModel was doing behind the scenes but am obviously confused. Is anyone able to shed some light or offer a better solution to what I wish to achieve?
Please see here :http://jsbin.com/jocane/1/edit?html,js,output
use ng-model="object.name" instead "sc.name"
<div ng-repeat="object in allMyObjects">
<input class="object-name"
ng-model="object.name">
<a ng-click="loadObject(object)">Load</a>
</div>
After an hour of debugging it came down to an issue with the scope being isolated by the ng-repeat, the problem didn't show up in any of the simplified jsfiddle examples because they used pure JS and it was the way I was accessing the scope via typescript that caused the issue.
Thanks for the answers that helped me narrow it down to my difficulty understanding typescript and not my difficulty understanding directives.
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.