I have an array of string that I want to bind to an array of inputs:
HTML:
<ul>
<li class="form-group" ng-repeat="remark in trip.remarks track by $index">
<label>Remarque {{$index + 1}}:</label>
<textarea class="form-control" type="text" ng-model="remark"></textarea>
</li>
<hr>
</ul>
<button ng-click="addRemark()" class="btn btn-success" style="width: 100%">Ajouter</button>`
In my controller I have already initialized the trip object, and the binding does happen, but when I edit the data through the textarea nothing changes in the trip object.
The is how my controller is coded:
$scope.trip = productService.getCurrentTrip();
$scope.addRemark = function () {
$scope.trip.remarks.push("");
}
It seem the binding is happening only from the controller to the view, also when I click addRemark button a new textarea does appear. So can anyone tell me how can I bind back to the controller?
NB:
1)I also tried to bind to this controller using ng-model="trip.remarks[$index]" but no use.
2) I have other fields in trip object that are binded and working two-ways
This is an example of prototypal inheritance which you can further explore here.
In your code snippet here:
ng-repeat="remark in trip.remarks track by $index"
Ng-repeat is creating a child scope for every remark in your trip object, and since remark is a primitive type, any modifications to it are getting hidden/shadowed and only modifying the child scope. The solution is therefore to utilize the "." notation as lzagkaretos mentioned, or bind your ng-model to an object reference as opposed to the primitive (string).
Option 1 should work. See working plunker.
ng-model="trip.remarks[$index]"
If it does not work for you, please check the trip object structure, maybe it is not as clear as something like {"remarks":["remark 1","remark 2d"]}.
You need to make sure the textarea NgModel is pointing to the same reference. To do so, create an array of objects where you only edit one value of that object.
Here's an example:
angular.module("app",[]).controller("myCtrl", function($scope){
$scope.trip = {};
$scope.trip.remarks = [
{"name": "1", "value": "hello world 1"},
{"name": "2", "value": "hello world 2"},
{"name": "3", "value": "hello world 3"},
];
$scope.test = function(){
alert($scope.trip.remarks[0].value + " | " + $scope.trip.remarks[1].value + " | " + $scope.trip.remarks[2].value);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
ul>
<li class="form-group" ng-repeat="remark in trip.remarks track by $index">
<label>Remarque {{$index + 1}}:</label>
<textarea class="form-control" type="text" ng-model="remark.value"></textarea>
</li>
<hr>
</ul>
<button ng-click="test()" class="btn btn-success" style="width: 100%">Ajouter</button>
</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>
I try and try but I cant get it working.. I do a ng-repeat creates me some DIVs out of a $scope-object:
<div class="col-2 currBit" ng-repeat="one in crypto">
<div class="currBitTitle">{{one.shortName}}</div>
<div class="currBitTitleSub">
<div class="currLogo currLogo_{{one.shortName}}"></div><br/>
{{one.longName}}<br/>
</div>
<div class="currBitInput">
<input type="number" placeholder="Your amount of {{one.shortName}}" ng-model="one.shortName" >
</div>
</div>
now, in the inputfield of each created DIV I need to set a ng-model, so my app can use the input-vlaues of the dynamicly generated input-fields
in this code posted, when the data is bound to the <div class="currBitTitle">{{one.shortName}}</div> ?? .. why is that? How can I get this managed?
it would be nice to have a individual prefix like ng-model="myfoobar_{one.shortName}"
is that even possible?
You can try to use like below code also check this fiddler link for your example scenario.
Template:
<input type="number" ng-model="myfoobar_[one.shortName]">
Controller:
$scope.myfoobar_ = {};
$scope.crypto = [{
"shortName": "Name1",
"longName": "Name One"
}, {
"shortName": "Name2",
"longName": "Name Two"
}];
I have a object which holds the key and value pair.
$scope.groups= {
1050 : 'Test',
1850 : 'Test1'
}
$scope.AnotherArray = [1050,1850];
item from ng-repeat is passed to the object as key to obtain the text 'Test'
<div ng-repeat="item in AnotherArray">
<input type="text" ng-model="groups[item]" />
</div>
Is there a way in angular to do this ?
As you were asking for an "Angular-way" to do this, here is a mildly modified version of Angular's ngRepeat example:
<div ng-repeat="(key, obj) in groups">
[{{key}}] {{obj}}
<input type="text" ng-model="obj"/>
</div>
http://plnkr.co/edit/0IRvLZpbUZUQBXOnebOt?p=preview
It makes use of Angular's internal conversion of array-like objects.
Link to Angular's ngRepeat-documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat
I have an array of strings, and I want each of the strings to be bound to an input.
However, editing the input doesn't seem to update the array (isolated scope issues maybe?).
Suggestions?
function Ctrl($scope) {
$scope.fruits = ['Apple', 'Mango', 'Banana', 'Strawberry'];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<div style="margin: 20px 0" ng-repeat="fruit in fruits">
<input type="text" ng-model="fruit" />
</div>
Fruits: {{fruits}}
</div>
</div>
You need the array reference which you can get from $index. Note however that this won't work if any filtering is done on the ng-repeat as the indexing then is based on filtered array not the original
<div style="margin: 20px 0" ng-repeat="fruit in fruits track by $index">
<input type="text" ng-model="fruits[$index]" />
</div>
DEMO
Ok, so it seems to me like a case of
'ng-model requires a dot in the model name to work correctly with the
scope, otherwise it would create a local scope'
What i would suggest is to change your data structure from plain strings to objects containing the strings as a property, something like :
$scope.fruits = [
{'title':'Apple'},
{'title':'Mango'},
{'title':'Banana'},
{'title':'Strawberry'},
];
Now, when you bind it to ng-model like this
<div style="margin: 20px 0" ng-repeat="fruit in fruits">
<input type="text" ng-model="fruit.title" />
</div>
then it will not create any local/child scope, instead it would be able to bind to the title property on the items in the fruits array.
example fiddle: http://jsfiddle.net/HB7LU/24008/
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!