I'm creating a form in HTML using ng-repeat to generate the form elements from an object in the scope. I also use that object to generate other elements outside of the ng-repeat.
A simplified example looks like this in HTML:
<div ng-app="App">
<div ng-controller="Ctrl">
<div class="block1">
<form ng-repeat="(key, value) in test">
<label>{{key}}</label>
<input ng-model="value" />
<p>{{value}}</p>
</form>
</div>
<div class="block2">
<p>
{{test.a}}
</p>
<p>
{{test.b}}
</p>
</div>
</div>
</div>
and this in JS:
angular.module('App', []);
function Ctrl($scope) {
$scope.test = {
a:"abc",
b:"def"
}
}
In this example, the text in block2 is set to the initial values of test.a and test.b. The input values and <p> values inside of the loop are also set to the initial value.
When I modify the values within the inputs, the <p> values inside of the ng-repeat block update correctly, but the <p> tags in block2 fail to update.
Why is this the behavior? Does ng-repeat create its own isolated scope? If so how can I get the controller level scope to update? Also, could somebody explain the thinking behind this behavior and any advantages it provides?
JSFiddle Showing the problem
ng-repeat creates a child scope for each repeated item. As a result you are trying to pass a primitive to child scope which won't create a reference to parent. When you pass objects however, you pass the original object reference.
From the mouth of one of the fathers of Angular:
Always have a dot in ng-model
This is a great video regarding Angular Best Practices given by Angular creator (2012/12/11). Go to minute 31 for well explained detail of this exact situation
Modify data to array of objects:
$scope.test = [{ val:"abc",key:'a'}, {val:"def",key:'b'} ]
Then in repeater:
<form ng-repeat="item in test">
<label>{{item.key}}</label>
<input ng-model="item.val" />
<p>{{item.val}}</p>
</form>
DEMO
try this:
angular.module('App', []);
function Ctrl($scope) {
$scope.test = [
{label:"a", value:"abc"},
{label:"b", value:"def"}
]
}
and
<div ng-app="App">
<div ng-controller="Ctrl">
<div class="block1">
<form ng-repeat="o in test">
<label>{{o.label}}</label>
<input ng-model="o.value" />
<p>{{o.value}}</p>
</form>
</div>
<div class="block2">
<p>
{{test[0].value}}
</p>
<p>
{{test[1].value}}
</p>
</div>
</div>
</div>
Angularjs uses the fact that objects are passed by reference. So, if you pass a object to a function and change the object inside the function, the object outside also changes.
Look at this updated JSFiddle
Related
I am trying to inheritance some properties from main controller but is not working as I expected.When I change values for data in main controller it update values for subcontroller too . Once I focus on subcontroller then is start working as I excepted .I have a counter in main controller which I want to store number enter by user but when user enter count for main controller it changes count of subcontroller .Why its update child Class.
How inheritance works in angularjs
<body ng-app="myapp">
<div ng-controller="MainController">
<label>Count for main controller</label>
<input type="text" ng-model="count">
<div ng-controller="subController">
<label> count for sub controller</label>
<input type="text" ng-model="count">
</div>
{{count}}
</div>
</body>
<script>
var myapp=angular.module('myapp',[]);
myapp.controller('MainController',function($scope){
$scope.count=0;
//other properties
});
myapp.controller('subController',function($scope){
//other properties
});
</script>
AngularJS use prototypical inheritance in Controller ,that's why when change value in base class it will change in child class too. Child is access properties from base class directly.
When we focus on child controller it create its own copy property and disconnected from property in base class. there is no way to stop this.
How ever we can force base properties to updated as child class update that properties Buy assigning object to $scope rather then properties directly.
<body ng-app="myapp">
<div ng-controller="MainController">
<label>Count for main controller</label>
<input type="text" ng-model="val.count">
<div ng-controller="subController">
<label> count for sub controller</label>
<input type="text" ng-model="val.count">
</div>
{{val.count}}
</div>
</body>
<script>
var myapp=angular.module('myapp',[]);
myapp.controller('MainController',function($scope){
$scope.val={count:0}
//other properties
});
myapp.controller('subController',function($scope){
//other properties
});
Now on updating child property it will update parent property too and will remain connected.
I have the following
<table id="socialMediaContainer" class="socialMediaContainer" style="width: 100%;">
<tbody>
<tr ng-repeat="row in detailCollection.ChannelsInfo"
ng-controller="WhiteLabelSitesCtrl">
<td><input id="txtSocialName" type="text" class="socialName"
placeholder="Name" ng-disabled="ViewMode" maxlength="250"
value="{{row.SocialChannelName}}" /> </td>
<td><input id="txtSocialURL" type="text" class="txtLabel socialURL"
placeholder="URL" ng-disabled="ViewMode" maxlength="250"
value="{{row.SocialChannelURL}}" />
</td>
<td class="DragnDropIcon"></td>
<td>
<a class="orange " ng-show="ViewMode">Upload</a></td>
</tr>
</tbody>
</table>
and I have another button outside the ng-repeat that updates the ViewMode variable, but this is not working inside the ng-repeat neither for the ng-show not the ng-disabled. what am i missing here?
The problem seems to be, that you need to move ngController directive to the table level (at least): it can't be on the same element with ngRepeat if the later iterated over the array defined in controller.
<table ng-controller="WhiteLabelSitesCtrl" ... >
<!-- ... -->
</table>
Demo: http://plnkr.co/edit/tu4TLmWIxdcYaiEd7whn?p=preview
ng-repeat creates a childscope for each item in the repeater.
Thus viewmode will be a primitive value on that child scope and therefore as a primitive will lose inheritance binding with the parent scope.
If you declare it as an object property in the controller scope however it will then be a reference to that parent object.
$scope.mode ={ViewMode: false}
html example
<a class="orange " ng-show="mode.ViewMode">Upload</a></td>
Try to pass object instead variable inside ng-repeat scope. Instead ViewMode,
declare in your controller:
$scope.model = {};
$scope.model.ViewMode = false;`.
And your binding must be like this: <a class="orange " ng-show="model.ViewMode">. After that all be work fine.
Read this article to understand why it happens: https://github.com/angular/angular.js/wiki/Understanding-Scopes
The button outside of the ng-repeat is not going to be nested in the same controller. The variable that it's modifying probably is not the same one that ViewMode under the WhiteLabelSitesCtrl is looking at.
When you point to this ng-controller, that controller will be activated with a new scope associated with it
<div ng-repeat ng-controller="WhiteLabelSitesCtrl">
<div ng-show="someValue"></div>
</div>
When you reference this controller again on another tag, it won't reference the existing controller as you might be expecting, it'll actually do the exact same thing... it will create the controller, and create a new scope for it- completely separate from the original one.
<div ng-controller="WhiteLabelSitesCtrl">
<button ng-click="someValue = !someValue"></button>
</div>
AngularJS Verion: 1.3.8
JSFiddle: http://jsfiddle.net/uYFE9/4/
I've been working on a small AngularJS application, and ran into a bit of a problem. I have an ng-repeat on a page, which fills in the contents of a form. The amount of items in the form is defined by a dropdown bound to a model, and populated using ng-options. Something like:
<select id="testAmount" ng-model="selectedItem" ng-options="item.name for item in items"></select>
<form role="form" name="testForm" ng-if="!complete">
<div ng-repeat="i in getNumber(selectedItem.number) track by $index">
{{$index}}
</div>
</form>
Complete is set to false in the beginning, and hitting a Next button will toggle complete and hide the form and dropdown. A Back button will then toggle complete back, and show the form again.
The problem I'm having is with the ng-if on the select (and previously, I had the form wrapped in a div with the same ng-if - same problem). The ng-repeat no longer updates when the select dropdown is changed. Removing the ng-if on the select restores the ng-repeat to working order.
I'm wondering if there's something strange I'm doing with the nesting here, or if it's actually a bug? You can test it out on the JSFiddle linked above. The $index should be printed the number of times on the dropdown, but isn't.
Interestingly enough - when debugging the problem on my local machine, having FireBug open fixed the issue.
This is because of ng-if creating a child scope and how prototypical inheritance works with primitives. In this case, the primitive is selectedItem that you are setting by the <select>, but is actually being set on the child scope and shadows/hides the parent scope property.
In general you should always use a dot (.) with ng-models:
$scope.selection = {selectedItem: undefined};
And in the View:
<div ng-if="!complete">
<select ng-model="selection.selectedItem"
ng-options="item.name for item in items"></select>
</div>
ng-if is causing you some scoping issues (which messes with the binding).
Here is an updated jsfiddle that you could use as a work around. Essentially, this example wraps another div around the items that you want to end up hiding. And then adds a next function so that the same scope is affected during the click that sets complete to true.
HTML:
<div ng-app="test">
<div ng-controller="TestCtrl">
<div ng-if="!complete">
<div>
<label for="testAmount">Amount:</label>
<select id="testAmount" ng-model="selectedItem" ng-options="item.name for item in items"></select>
</div>
<form role="form" name="testForm">
<div ng-repeat="i in getNumber(selectedItem.number) track by $index">
{{$index + 'hi'}}
</div>
<button class="btn btn-default" value="Next" title="Next" ng-click="next()">Next</button>
</form>
</div>
<div ng-if="complete">
</div>
</div>
</div>
JS:
angular.module('test', [])
.controller('TestCtrl', function($scope) {
$scope.complete = false;
$scope.items = [
{ name: '2', number: 2 },
{ name: '3', number: 3 },
{ name: '4', number: 4 }
];
$scope.selectedItem = $scope.items[0];
$scope.getNumber = function (number) {
return new Array(number);
};
$scope.next = function() {
$scope.complete = true;
};
})
I believe the problem is with your select statement inside an ng-if the selectedItem is never getting set. If you just don't want to show that dropdown when !complete change it to an ng-show and it works fine.
<div ng-show="!complete">
As to WHY the ng-model is not being bound inside the ng-if, I don't really know but it does make some sense in that you are trying to do a conditional bind which is a bit screwy
I was looking this example AngularJS ng-model $scope in ng-repeat is undefined in this question first answered by #Gloopy here http://jsfiddle.net/VnQqH/128/
My question is can I update ng-model values in ng-repeat scope from outside of ng-repeat scope like this:
<div ng-app="MyApp">
<div ng-controller="PostCtrl">
<div ng-repeat="post in posts">
<strong>{{post}}</strong>
<input type="text" ng-model="postText">
</div>
/*Update ng-model values (in ng-repeat scope) using single click*/
save post
</div>
</div>
Here is controller:
angular.module('MyApp',[]);
function PostCtrl($scope) {
$scope.posts = ['tech', 'news', 'sports', 'health'];
$scope.savePost = function(post){
alert( 'post stuff in textbox: ' + post);
}
}
I tried but got undefined :( My experimental fiddle is here http://jsfiddle.net/hot81o2z/ If anyone has the solution for this problem please share. Many thanks in advance.
You can make use of $parent in order to pass a scope variable outside of the ng-repeat directive, something like this
HTML:
<div ng-app="MyApp">
<div ng-controller="PostCtrl">
<div ng-repeat="post in posts">
<strong>{{post}}</strong>
<input type="text" ng-model="$parent.postText">
</div>
<!--Update on single click-->
save post
</div>
</div>
Controller: Not changed anything, kept what you had
Working Demo
I have created an application in AngularJS with edit, save and cancel options, but the problem is that when I click the edit I am not getting the value for editing and saving.
The textfield and dropdowns are been provided through ng-transclude
Can anyone please tell me some solution for this
DEMO
HTML
<div ng-controller="LocationFormCtrl">
<h2>Editors</h2>
<span ng-repeat="location in location">
<div class="field">
<strong>State:</strong>
<div click-to-edit="location.state"><input ng-model="view.editableValue"/></div>
</div>
<div class="field">
<strong>City:</strong>
<div click-to-edit="location.city"><select ng-model="view.editableValue" ng-options="loc.city for loc in location"></select></div>
</div>
<div class="field">
<strong>Neighbourhood:</strong>
<div click-to-edit="location.neighbourhood"><input ng-model="view.editableValue"/></div>
</div>
<h2>Values</h2>
<p><strong>State:</strong> {{location.state}}</p>
<p><strong>City:</strong> {{location.city}}</p>
<p><strong>Neighbourhood:</strong> {{location.neighbourhood}}</p>
<hr>
</span>
</div>
Don't really know why, I was just playing around with the code, but seems working, at least with the text fields, using ng-if instead of ng-show/ng-hide: http://jsfiddle.net/T6rA9/1/
I'll update my answer if I find a reason...
Update: I think this is what you're looking for: http://jsfiddle.net/T6rA9/7/
The difference is that instead of saving the value on save, I am reverting the changes on cancel, which is easier due to angular two-way data-binding.
Because of that, I also removed the view.editableValue ng-model directive and used the fields as you would normally do.
Transclusion and isolated scopes does not work the way you may think. You can read more about it here http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
If you i.e. make this change you will already see a difference
<div click-to-edit="location.state"><input ng-model="location.state"/></div>
What about creating ngClick function which add input element inside your div with previous value?
<div class="newInput" ng-show="hidden">
<label> {{ inputValue }} </label>
</div>
<div class="newInput" ng-show="!hidden">
<input ng-model="inputValue" />
</div>
And main.js file:
app.controller('MyCtrl', function($scope) {
$scope.hidden = true;
$scope.inputValue = 'Edit me!';
$scope.addInput = function() {
$scope.hidden = !$scope.hidden;
}
});
Here you have Plunker