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
Related
I'm trying to get multiple values selected form a checkbox list generated using ng-repeat in anguler
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model.ID" ng-true-value="'{{item.ID}}'" ng-false-value="''"/>{{item.Name}}
</div>
But what I want is to have different ng-models for different check boxes. How can I do that. Is there a way to do what ng-repeat does with out using ng-repeat
In Angular one checkbox is linked with one model, but in practice we usually want one model to store array of checked values from several checkboxes.
Checklist-model solves that task without additional code in controller. examples
use $index as key
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model[$index].ID"/>{{item.Name}}
</div>
or use item unique id:
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model[item.ID]"/>{{item.Name}}
</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
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).
The problem I'm facing, as outlined in the code, is that I can't seem to find out how to bind the second checkboxes (created with ng-repeat) to some model which I would then be able to use further down the code (showing/hiding yet another set of options). Also, I managed to show the additional number of inputs based on the count parameter in the $scope.availableOptions by using the $scope.getItterator function, but now I don't see how would I access the values of these checkboxes? I know I have to somehow use the option "ng-model" but am failing to do so, so any help appreciated.
My code is here, but am showing it here too:
html:
<div ng-controller='MyCtrl'>
Show additional options <input type="checkbox" ng-model="additionalOptions">
<div ng-show="additionalOptions">
<ul>
<li ng-repeat="option in availableOptions">
<label class="checkbox" for="opt_{{option.id}}">
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" />
{{option.name}}
<ul ng-show="if the upper checkbox is clicked">
<li>
<input type="text" ng-repeat="i in getItterator(option.count)" ng-model="SOME_VALUE_TO_BE_USED_BELOW"/>
Output the value based on what's entered above in the textboxes (SOME_VALUE_TO_BE_USED_BELOW)
</li>
</ul>
</label>
</li>
</ul>
</div>
</div>
and my js:
function MyCtrl($scope) {
$scope.availableOptions = [{"id":"1","name":"easy","count":"2"},{"id":"2","name":"medium","count":"3"},{"id":"3","name":"hard","count":"2"}];
$scope.getItterator=function(n){
var a = new Array();
for(var i=1; i <= n; i++)
a.push(i);
return a;
};
}
Try ng-model="option.checked":
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.checked"/>
And then you can access this property further below like this:
<ul ng-show="option.checked">
DEMO
If you need to also reference the text box inputs. You create a new property (values) on the option. Like this:
{"id":"1","name":"easy","count":"2",values:[]}
Html:
<div ng-repeat="i in getItterator(option.count)">
<input type="text" ng-model="option.values[$index]"/>
{{option.values[$index]}}
</div>
DEMO
Use this:
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.clicked"/>
{{option.name}}
<ul ng-show="option.clicked">
Basically, you are saying that the top checkbox should store its value in a model for each option option.clicked. And then only showing the information based on the scope item.
Updated Fiddle:
http://jsfiddle.net/CkHhJ/26/
UPDATE:
Here is another updated fiddle to answer your questions second part: http://jsfiddle.net/CkHhJ/27/
The difficulties you were having is likely because you are trying to build dynamic input models. Just bear in mind that you need to use an object for the dynamic values (not a plain string, eg: option.answers[$index].value and not just option.answers[$index]. See: AngularJS: Updating an input with a dynamic ng-model blurs on each key press
Can i use filter filterexpression without ng-repeat in angularjs.
<li><input ng-model="query" placeholder="search on players" /> <input ng-model="q" placeholder="search on teams" /></li>
<li ng-repeat="(nomeTeam, squadre) in listaSquadre" >
<div ng-init="sq = squadre|filter:{nome:query,team:q}|orderBy:['pos','nome']" class="1c">
<pre>{{sq}}</pre>
<strong ng-show="sq.length > 0">{{nomeTeam}}</strong>
<ul>
<li ng-repeat="giocatore in sq" >{{giocatore.nome}} - {{giocatore.Role}} -
<span ng-switch="{{giocatore.pos}}">
<span ng-switch-when="1">PF</span>
<span ng-switch-when="2">PA</span>
</span>
</li>
</ul>
</div>
</li>
</ul>
The above code not filtering data. I want to print the Team name, it is external to the ng-repeat, after search.If serach return data, i want to print the team name, else no.How i can i achive this with angularjs.
Can i use filter filterexpression without ng-repeat in angularjs.
From Docs:
Selects a subset of items from array and returns it as a new array.
For sure you can use filter or custom filter (with Filter postfix) into controllers. Filters like ng-repeat directive works with arrays.
In your case I would clone the array, filter it and run with ng-repeat on filtered result