I have this html:
And I want to create dynamically ng-models for these inputs:
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="model$index" />{{$index}} please check
</div>
and it's not working.
I there a way to dynamically create ng-model in a input, inside a ng-repeat?
EDIT:
The final result is:
<input type="checkbox" ng-model="model$index" />0 please check
My expected result is:
<input type="checkbox" ng-model="model0" />0 please check
The way you are trying to do its not appropriate, creating separate
variable for each element, that will make more maintenance sort of
work.
Also this will become messy to when you apply any filter on ng-repeat. Instead of that you could place that model value inside the ng-repeat element which is order here order.
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="order.value" />{{$index}} please check
</div>
Related
I just wanted to know how I could get the page scrolled to top when checkbox is selected using jQuery or JavaScript, knowing that there is some Angular JS code in there.
<div class="checkbox-list">
<div class="checkbox box-collapse-color" ng-repeat="Type in Types">
<span class="count pull-right">{{Type.count}}</span>
<input type="checkbox"
ng-click="addCompanyType(Type.ac)"
id="checkbox1-c-{{$index}}" />
<label class="check" for="checkbox1-c-{{$index}}">
<span>{{Type.ac}}</span>
</label>
</div>
</div>
Thanks in advance.
The easiest way is the following:
$window.scrollTo(0, 0);
It seems the code should be placed into your addCompanyType function, but I can't say definitely. I'd suggest looking at Angular JS ng-checked directive. Do not forget to inject $window.
I'm trying to check the first index, but it isn't working. I also tried to do this with ng-init.
<div class="col-md-4" ng-repeat="category in categories">
<label>
{{category.Name}}
<input type="radio" ng-checked="$index==0?true" name="pageNumber" ng-model="$parent.pageNumber" ng-value="category.Name" />
</label>
</div>
Does anyone know why?
ngChecked shouldnot be used with ngModel (https://docs.angularjs.org/api/ng/directive/ngChecked)
You can try this
<input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="category.Name" />
</label>
and when the categories get populated in you controller you can add the following code after that
$scope.pageNumber = $scope.categories[0];
Try using the following expression $index==0?true:false or simply $index==0
ngChecked is expecting an expression, so by saying ng-checked="$index == 0", you're basically saying that the checkbox will always be checked or unchecked by default based on the condition output.
remove ng-value as you can also pass the element data using ng-model.
Working fiddle : http://jsfiddle.net/LYuCG/16/
You can simple write ng-checked="$first"
<div class="col-md-4" ng-repeat="category in categories">
<label>
{{category.Name}} - {{$index}} -
<input type="radio" ng-checked="$first">
</label>
</div>
Example http://jsfiddle.net/Lvc0u55v/8864/
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
I have the view below. What I want is to change the class of the div based on whether or not the radio button inside it is checked. What am I doing wrong? Note: I'm a newbie to AngularJS and this project is me trying to learn Angular..
<div class="col-use-select" ng-repeat="show in shows" ng-class="{show[name]:'test'}[tvshow.chosen]">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
You are applying ng-class to div of ng-repeat hence it is assigned to all div's. You need to create a child div, add ng-class to that div with your condition. it will toggle the class of only that child div
<div class="col-use-select" ng-repeat="show in shows">
<div ng-class="test:tvshow.chosen">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
What I got from the question is that you want to change the class on a particular radio button selection. The html markup that you have shown is not a valid one when assigning a class on conditional basis in angular.
Please find one below which will change the css class of the div on selection of option and then choose another class on the basis of alternate selection
<div ng-app ng-controller="test">
<div class="col-use-select" ng-repeat="show in shows" ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="$parent.tvshowChosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
In this example the line:
ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}"
Signifies that if tvshowChosen value is abc then test class will be applied or in the second case test2 will be applied.
This line:
ng-model="$parent.tvshowChosen"
Over here $parent is used as ng-repeat creates its own isolated scope. So $parent will target the parent scope and not individual isolated scopes so that the selection can be a valid one.
Working Fiddle
I am using Check-box model as seen here http://vitalets.github.io/checklist-model/ for check boxes with Angularjs. Some of the Check-boxes need the last check-box element to uncheck all the others. How would I add a ngClick attribute to the last element in a set of Checkboxes using the check-box-model module.
Try Below Solution:
Working Demo
<label ng-repeat="role in roles">
<input ng-click="$last&&mytest()" type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Click on last check box "admin" and it will be alert box
Well I don't know much about checklist-model but you can add ngClick to the last element like this:
<label ng-click={{$last && yourFunction || ''}} ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
Though, It will add ng-click attribute to all elements but this can work for you. Its an alternative.