I'm trying to create a row of menu items that can be reordered by drag and drop. How can I bind a field called order in my model to the index?
this throws errors for me
<menu-row ng-repeat="i in menus"></ng-repeadt>
int the directive template:
<input field="hidden" name="order" ng-model="i.order = $index" />
I get this error
https://docs.angularjs.org/error/ngModel/nonassign?p0=i.order
But it does seem to bind the number ok. If I set the display it works.
You can't assign in the ng-model, instead, assign in ng-init
<input field="hidden" name="order" ng-init="i.order = $index" ng-model="i.order" />
Related
I want to create a a 3 radio button groups each having its own unique model using one ng-repeat. How can I achieve this?
<div class="radio" data-ng-repeat="item in selItem.items" >
<label class="control-label">
<input type="radio"
data-ng-value={{item.vm}}
data-ng-model="????"
name="{{selItem.Title}}"/>{{item.dm}}
</label>
</div>
First and foremost, why would you do that? Radio buttons are for a unique selection among a group of options, so having the same model for all radio buttons is the way to go.
However, for setting unique ng-models for each item iteration inside ng-repeat, you have to use object bracket notation, using $index or a property of each iteration itself to name the property of the object model.
<div ng-repeat="item in items">
<input type="text" ng-model="myModel[item.name]" >
</div>
check this fiddle to see it working
Following is the code I am using to populate the checkbox list.
<label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item .id">
<input type="checkbox" name ="item " ng-value="item .id" ng-model ="vm.selecteditem" />{{item.name}}
</label>
The above code selects all the items in ItemList. I need to select only one item from itemList. How do I do that?
https://vitalets.github.io/checklist-model/
This link worked for me!
1) set checklist-model instead of ng-model
2) set checklist-value instead of ng-value
You're attaching the same externalized variable vm.selectedItem to every checkbox. Because of this, when you check one it changes that variable to true in turn selecting all of the checkboxes because they are bound to the same variable which is now true.
My advice to you would be to attach a selected property to each item in ItemList. Then have that attached to the ng-model as shown below.
<label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item .id">
<input type="checkbox" name ="item " ng-value="item .id" ng-model= "item.selected" />{{item.name}}
</label>
I want to bind item to the view only once in my angulajs project.
Here is plunker.
Here the template html:
<div class="form-group">
<div class="col-xs-8">
<span ng-repeat="city in ma.cities" class="view" ng-if="city.Id == ma.selected">
{{::city.Name}}
</span>
<select class="form-control"
ng-model="ma.selected"
ng-options="city.Id as city.Name for city in ma.cities">
</select>
</div>
</div>
I want the city.Name to be bind to template html only once.
But the problem that when I change the item in select element the city.Name is also updated.
I try to use once bind operator :: but it didn't help.
How can I bind element to the view only once and to prevent update?
The value isn't changing. You're got an ng-if nested within an ng-repeat and when the city is changed which item is displayed changes.
If I'm following what you're trying to do, I would store the currently selected city to a property on the controller when the controller is created and display that property, eliminating the ng-repeat and the ng-if in the process.
I agree with Mike, the question is a bit ambiguous. I think what you're asking for is:
<span>{{::ma.cities[ma.selected].Name}}</span>
But then again, as Mike said, you could've achieved that with another scope variable, and it would be probably a much clearer solution.
As YOU adviced I modified html template:
<span ng-repeat="city in ::ma.cities" class="view" ng-if="::city.Id == ma.selectedId">
{{city.Name}}
</span>
Here is plunker.
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
I have set up a json containing a list of countries with an ID and Country code attached:
It looks like this:
$scope.countries = [
{"name":"Afghanistan","id":"AFG","country-code":"004"},
{"name":"Åland Islands","id":"ALA","country-code":"248"},
{"name":"Albania","id":"ALB","country-code":"008"},
{"name":"Algeria","id":"DZA","country-code":"012"}
]
I then use the ng-repeat directive to create checkbox inputs for every country.
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="{{country.id}}" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
However when I run the code I only get the following to display:
Location
checkbox here {{country.name}}
If I remove the ng-model part of the repeat my checkboxes generate fine but I need a unique ng-model to be attached to every checkbox
ng-model="{{country.id}}"
How would I go about attaching a unique ng-model value?
This answer (Generate ng-model inside ng-repeat) does not provide a unique ng-model value
I will suggest you, use:
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="myCountry.selected[country.id]" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
{{myCountry.selected}}
JS:
$scope.myCountry = {
selected:{}
};