I'm trying to bind a model 'User' to a list of input fields. I do not know the fields beforehand, so i've to write a generic code to setup the form based on the fields.
<script>
function MyController($scope){
$scope.fields = ['name','password','dob'];
$scope.user1 = {name:"Shahal",password:"secret"}
};
</script>
<div ng-app ng-controller="MyController">
<ul>
<li ng-repeat="field in fields">
<label>{{field}}</label><input type="text" ng-model="user1.{{field}}">
</li>
</ul>
<pre>{{fields}}</pre>
</div>
I'm trying to loop through the fields and show a input field for each fields (available in scope). But the binding is not proper as i'm trying to evaluate an expression inside ng-model.
Basically i'm trying to show 3 input fields (name,password,dob) with the object user1 attached to the corresponding field.
Here's the fiddle
Any help?
Below will solve your problem
<script>
function MyController($scope){
$scope.fields = ['name','password','dob'];
$scope.user1 = {name:"Shahal",password:"secret"}
};
</script>
<div ng-app ng-controller="MyController">
<ul>
<li ng-repeat="field in fields">
<label>{{field}}</label><input type="text" ng-model="user1[field]">
</li>
</ul>
<pre>{{fields}}</pre>
</div>
Related
This question already has answers here:
AngularJS: ng-model not binding to ng-checked for checkboxes
(7 answers)
Closed 3 years ago.
I am trying to use ng-repeat directive with track by expression, to show radio buttons, when I submit the value gets attached in the model and when I reopens the page using the values in model, the radio button does not show checked.
I have implemented same with plane string model + string values . But this time am trying with objects.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>New TRY</p>
<ul>
<li ng-repeat="i in peopleNew.person">
<label>
{{i}}
<input type="radio" ng-model="peopleServer.person"
name="same" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
JS code
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.peopleNew ={
person: {
"name": "Ringo",
"id": "R",
"subj": "Sci"
}
}
$scope.peopleServer= {
person: {"name":"Ringo"}
}
});
As per above, I should have 4 radio buttons on the screen, I am able to select 1 and submit. And then when I again open it in my model the person have the right value which was saved thorough ng-value but still on UI i don't see the radio button as checked for name Ringo should be checked. Model have:
$scope.peopleServer= {
person: {name:"Ringo"}
}
Tried Solutions
ng-checked expression , although I read that ng-model and ng-checked
should not be used together, ideally using model binding it should be chcked.
explanationI read about ,ng-repeat is not rendering properly so i tried to re render forcefully but did not work.
Removed ng-checked from the template still did not work.
Track by works for string values in ng-repeat.In ng-options it worked for object values also, but then its not input element but a select element
Someone help understand, when you reload or you already have the value in model,how the radio button be selected
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.peopleNew ={
person: {
"name": "Ringo",
"id": "R",
"subj": "Sci"
}
}
//uncomment for testing.
$scope.peopleServer= {
person: {"name":"Ringo"}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>New TRY</p>
<ul>
<li ng-repeat="i in peopleNew.person">
<label>
{{i}}
<input type="radio" ng-model="peopleServer.person"
name="same" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
automatically ? all my tries above are not working am i missing something.
You have some syntax errors, missing model values and some unnecessary markup. First, you can get rid of the ng-checked altogether. That will be handled automatically if you set your ng-model and ng-value properly. Since your objects are unique there's no need for track by.
When using AngularJS directives (such as ng-value) you do not need to use braces to reference your model values. So ng-value="{{person}}" becomes ng-value="person".
You refer to myObj.person, but there doesn't appear to be a corresponding model value. Below is an edit of the code and markup you have provided showing that it really does work to use an object as the value for your radio buttons.
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.people = [{
name: "John",
id: "J"
}, {
name: "Paul",
id: "P"
}, {
name: "George",
id: "G"
}, {
name: "Ringo",
id: "R"
}];
$scope.myObj = {
person: $scope.people[1]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>Decisions</p>
<ul>
<li ng-repeat="person in people">
<label>
{{ person.name }}
<input type="radio" ng-model="myObj.person"
name="sameName" ng-value="person" />
</label>
</li>
</ul>
</form>
<div>
{{ myObj.person }}
</div>
</div>
More than finding a way to resolve this, I am now interested in understanding why this is not working.
Let's say I have this array in angular:
$scope.movieThemes = [ 'Fiction', 'Drama'];
And another array with with movies like:
$scope.movies=[{theme:'Drama', movie:'One million dollar baby'}, {theme:'Drama', movie:'Green mille'},{theme:'Fiction', movie:'Avatar'}, {theme:'Fiction', movie:'The Hobbit'}]
I have an ngRepeat with my themes
<div ng-repeat= "t in movieThemes">
And a nested datalist filtering the themes:
ng-repeat="m in movies|filter:{theme:t}
Where t is from the parent repeater like:
<datalist id="movieList">
<option ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option>
</datalist>
OK as you can confirm on my fiddle this is not working:
Online Demo
But the question is why not?
Worth to mentioned without a data list it works fine:
Without Data List Demo
Try like this. i change your filter function syntax and also add select tag to dataList.
Edit:
Your problem cuase for datalist id. i.e your datalist ids in ne-repeat are same. i change datalist ids by adding $index to it. now it work correctly.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ["$scope",function MyCtrl($scope) {
$scope.movieThemes = [ 'Fiction', 'Drama'];
$scope.movies=[
{theme:'Drama', movie:'One million dollar baby'},
{theme:'Drama', movie:'Green mille'},
{theme:'Fiction', movie:'Avatar'},
{theme:'Fiction', movie:'The Hobbit'}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat= "t in movieThemes">
<input type="text" ng-model="t" />
{{t}} - {{$index}} <input type="text" placeholder="Users" list="movieList{{$index}}">
<datalist id="movieList{{$index}}">
<select>
<option ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option>
</select>
</datalist>
</div>
</div>
You can use groupBy filter. This way you don't need wot worry about themes array. You can write your own/use angular filters module.(https://github.com/a8m/angular-filter)
<ul>
<li ng-repeat="(key, value) in movies| groupBy: 'theme'">
Group name: {{ key }}
<ul>
<li ng-repeat="m in value">
player: {{ m.movie}}
</li>
</ul>
</li>
</ul>
BTW I like angular filters modules
I use this lib to create table on page.
Every row in this table can be edited. So if editMode is on, I show inputs at each column of row. Some of this inputs is required. I want to show red text "Required" or just red border if required field is empty.
But problem - it's simple when I use form. But in my case I can't use forms.
This answer isn't good for me, cause every row must have unique form-name for correct validation.
Example : https://jsfiddle.net/r8d1uq0L/147/
<div ng-repeat="user in users">
<div name="myform-{{user.name}}" ng-form>
<input type="text" ng-model='user.name' required name="field"/>
<span class="error" ng-show="myform.field.$error.required">Too long!</span>
</div>
</div>
<div>
<button ng-click="add()">
Add
</button>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [{name:"1"}, {name:"2"}];
$scope.add = function(){
$scope.users.push({});
}
});
No need to create a dynamic form name, as ng-repeat does create new child scope on each iteration while drawing template on browser. So just keep name as name="innerForm" and use innerForm.field.$error.required to have validation over it.
<div ng-repeat="user in users">
<div name="innerForm" ng-form>
<input type="text" ng-model='user.name' required name="field"/>
{{myform[$index]}}
<span class="error" ng-show="innerForm.field.$error.required">Too long!</span>
</div>
</div>
Forked Fiddle
I want to use ng-repeat object in ng-model value as sub string.. can i use this?? My scenario is:
<form id="booking_form" name="booking_form" ng-app="myApp" ng-submit="tasksubmit()">
<ul class="items-list">
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<div class="items-list-item-image">
<p>
<input type="checkbox" ng-model="tasksubmit{{task.id}}" />
</p>
</div>
<div class="items-list-item-detail">
<p>
<strong>{{task.title}}</strong>
</p>
</div>
</li>
</ul>
</form>
in < input type = checkbox > i want to generate dynamic ng-model with prefix of tasksubmit (this is initialized in controller as $scope.tasksubmit = {} ). Any body please help me out in this problem.....
If I understand correctly you want all task.id as property inside your tasksubmit object as you have initialized it as object in your controller so you can do as below:
<input type="checkbox" ng-model="tasksubmit[task.id]" />
Just add model with ngRepeat's instance property
Like this
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<input type="checkbox" ng-model="task.isChecked" />
</li>
You'll find value of isChecked from $scope.taskslist
JSFIDDLE
I am new to Angular and I was trying my hands on a few functions. I found this strange behavior when I try to re-enter the same value.
<!-- HTML -->
<body ng-app="angular-test">
<div ng-controller="FormController">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
<form ng-submit="addName()">
<input type="text" ng-model="newName">
<input type="submit" value="Add">
</form>
</div>
</body>
/*** Angular Code ***/
(function() {
var app = angular.module("angular-test", []);
app.controller("FormController",formController);
function formController($scope){
$scope.names = ['Israel','Agyeman','Prempeh','Osei','Apea'];
$scope.addName = function(){
$scope.names.push($scope.newName);
$scope.newName = '';
}
}
})(angular);
![A list generated from the existing model in the HTML page][1]
Israel
Agyeman
Prempeh
Osei
Apea
King
king
______________ [Add] (input form)
"King" was added through the add button so was "king" but as I typed "king" again it failed to update and does not update afterwards no matter what I insert. Any ideas as to what is causing this?
Evening Israel,
You can't duplicate values in a repeater. To make it works, just add the following:
name in names track by $index
Or see it in action: http://codepen.io/anon/pen/xGzRKK
Hope it helps!