Who do I pass the value of an number input element to ngClick in the example below?
<div ng-repeat="item in items">
{{ item.name }}
<input type="number">
<button type="button" ng-click="something(item, valueOfInputElement)>click</button>
</div>
Adding ng-model="item.number" to the input element works but this seems like overkill to just get the value of an input element.
Adding ng-model to the input is the way to do this. It is not overkill. This is the documented way to handle input data in Angular.
<div ng-repeat="item in items">
{{ item.name }}
<input type="number" ng-model="item.myNumber">
<button type="button" ng-click="something(item)>click</button>
</div>
In the above example, ng-model is bound to item.myNumber. Binding inside each item in the ng-repeat will make sure that you are changing each item individually. Then, you can pass only item in the ng-click (because myNumber is now a property of item).
Related
Is there a way to avoid IDs while creating elements i.e. using ng-model it is easier to validate form fields and other stuff?
<div ng-repeat="x in TestData">
<input type="text" id="nameField-{{$index}}"/>
</div>
The above code will display the number of input boxes equal to the length of the TestData array where every text box will have a unique id "nameField-0", "nameField-1" and so on, using these IDs we can take the textbox values, validate the fields etc.
<div ng-repeat="x in TestData">
<input type="text" ng-model=""/> <!-- what shall be done here to have unique IDs -->
</div>
Although going with IDs is working fine for me but as far as I can understand If I use IDs then that will not be a pure angular way (or IDs cannot be replaced by mg-models), correct me If I am wrong.
You don't need to grab element with id/name/etc. You can use ng-model to bind your values and ng-pattern to validate them.
<div ng-repeat="x in testData">
<ng-form name="tForm">
<input type="text" name="tInput" ng-model="x.name" ng-pattern="/^[A-Z]*$/" />
<span ng-if="tForm.tInput.$error.pattern" style="color:red">Invalid!</span>
</ng-form>
</div>
See this jsbin.
In your controller add this,
$scope.nameField = [];
in ng-reapeat add this,
<div ng-repeat="x in TestData">
<input type="text" ng-model="nameField[$index]"/>
</div>
nameField will be an array with all your values.
<div ng-repeat="x in TestData" ng-init='this["nameField-"+x]'>
<input ng-model='this["nameField-"+x]'/>
</div>
You use ng-init to add new variables to the controller, "this" refer to your scope, and since the scope is an object, since this[bla] == this.bla tou are actually saying, add to my scope a variable name "nameField=" and you add the x value.
after you have created your variable, just use it in the same way in your ng-model.
If you want to show your variable's value in any div/span, just use it via ng-bind:
<div ng-bind='this["nameField-"+x]'></div>
I have number of checkboxes created using the ng-repeat based on the dynamic data, I want to set the ng-true-value of a checkbox with the dynamic data, that is a string, My code is as Follow:
<div ng-app="myApp" ng-controller="PostList">
<ul>
<li ng-repeat="ff in totalFeatures">
<input type="checkbox" ng-model="checkBoxModel.search[$index]" ng-true-value="{{ff}}" ng-false-value="" name="{{ff}}"/>
<label>{{ff}}</label>
</li>
</ul>
</div>
You have to define checkBoxModel.search[$index] as ng-model.
ng-true-value / ng-false-value represents the values which are bound to the model on true or false.
If these values are no boolean you have to wrap them with single quote too.
eg. ng-true-value="'{{ff.checkedTrueValue}}'"
Try to utilize ng-repeat instance like this
<li ng-repeat="ff in totalFeatures">
<input type="checkbox" ng-model="ff.isChecked" ng-true-value="{{ff.checkedTrueValue}}" ng-false-value="{{ff.checkedFalseValue}}" />
<label>{{ff}}</label>
</li>
You can get/set value of isChecked,checkedTrueValue,checkedFalseValue in $scope.totalFeatures
Id like to pass the value of the data-ng-options to the ng-model but get the label of the value to display on the span as below , How would i go about it ?
View
<tr ng-repeat="choice in vm.choices">
<td>
<span>#{{choice.department }}</span>
<div class="form-group">
<div class="input-group">
<select data-ng-options=
'd.value as d.label for d in vm.departments' ng-model="choice.department">
</select>
</div>
</div>
</td>
</tr>
controller
vm.departments = [
{value:0, label:'DENTAL'},
{value:1, label:'PYCHOLOGY'}
];
id like the label ie 'DENTAL' to display on the span but pass the value ie 0 to the ng-model
Storing the value only in the ng-model makes no sense. Storing the object is the standard method when dealing with an array of objects in a dropdown.
Consider the following:
<span>#{{choice.department.value }}</span>
<span>{{choice.department.label}}</span>
<div class="form-group">
<div class="input-group">
<select data-ng-options='d.label for d in vm.departments'
ng-model="choice.department">
</select>
</div>
</div>
http://plnkr.co/edit/MGIvAAhiSsgkxSXpwTWZ?p=preview
You have access to all the properties of the object to use for whatever you need.
The difference here is in the way that the ng-options is structured. By not supplying an as clause, the entire object is assigned to the ng-model parameter, instead of a specific property from the object.
Transform the array into object looking like this:
{
0: 'DENTAL',
1: 'PSYCHOLOGY'
}
and store it in separate scope variable (let's say dict), then in template use:
{{dict[choice.department]}}
I have a list of text fields with a button below it. I can add text fields to that list dynamically with AngularJS.
The text field by default has an empty value. But I want to order the position of the list item as soon as I update the value of that text field. But when I do that the orderBy isn't triggered.
How can I make this happen?
Here's a quick demo: http://jsfiddle.net/fqnKt/214/
I just wanted to specifically note why the example was wrong (because I had the same issue even though I was using the orderBy directive).
DO NOT USE
track by $index
In your ng-repeat
I think that this is what you want:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items | orderBy:'name'">
<input type="text" ng-model="item.name" /> {{item.name}}
</li>
</ul>
<input ng-model="newItem" type="text"></input>
<button ng-click="add(newItem)">Add</button>
</div>
</div>
Working Example
Try to use ng-repeat
<ul>
<li ng-repeat = "n in [1,2,3,4]>
<label id="{{'p'+ n }}"> {{n}} </label>
<label ng-model="{{'p'+ n }}"> {{n}} </label>
</li>
</ul>
The first "label" works. Its "id" is assigned properly. But the second "label" doesn't work.
Is that because "ng-model" cannot be created dynamically?
I was trying to use <select ng-model ... ng-options ...> within a ng-repeat. Not being able to create these "ng-model" dynamically, I am stuck here.
ng-model is an Angular attribute, you don't need to include the {{}} -- try ng-model="'p' + n"
Try using ng-init to reference $index
<li ng-repeat = "n in [1,2,3,4] ng-init="myIndex = $index">
<label ng-model="{{'p'+ myIndex }}" />
</li>
This is not working because you have used ng-model on label tag which is not possible.
ng-model can be only used on input, select and textarea as per This
you cannot use it on div's, ul, ol, tabel etc.
Instead, to assign the value in label you can use ng-value like this:
<label ng-value="{{'p'+ n }}"> {{n}} </label>
or to assign index value to ng-model you can do:
<input type="text" ng-model="user.text[$index]"/>
to display the index you can do:
{{$index}}