We all know ng-repeat creates it's own scope for each repeated item. Take the following example
The above code actually creates two divs (one for each item in the nameList) and renders those with the content and the output would be
If we try to do similar thing where we put radio buttons instead of divs it will create separate scope for each radio button.
Let's change our HTML to the below one:
Here is the Plunkr link:
Plunkr for above HTML
However if we select any radio button it does not change the selectedItem value of the scope, because it changes value of selectedItem of the new scope for span, to bind to the parent scope's selectedItem object we have to change the code to....
The $parent refers to the parent scope so now we refer to the selectedItem object which is defined in our controller.
The above approach looks simple, however when the radio button goes under a transcluded directive we need to refer something like $parent.$parent....... till we reach the main controller's scope.
Another approach would be doing this in event publish/subscribe pattern.
Here is the implementation:
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
angular.module("sampleapp", []).controller('samplecontroller', function($scope) {
$scope.nameList = [{
name: "Lemon"
}, {
name: "John"
}];
});
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<div ng-repeat="item in nameList">{{item.name}}</div>
</body>
</html>
The above code actually creates two divs (one for each item in the nameList) and renders those with the content and the output would be
Lemon
John
If we try to do similar thing where we put radio buttons instead of divs it will create separate scope for each radio button.
Let's change our HTML to the below one:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
angular.module("sampleapp", []).controller('samplecontroller', function($scope) {
$scope.nameList = [{
name: "Lemon"
}, {
name: "John"
}];
$scope.selectedItem = $scope.nameList[0];
});
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<form>
Select a name fom two names:
<br/>
<span ng-repeat="item in nameList">
<input type="radio" name="name" ng-value="item" ng-model="selectedItem">{{item.name}}<br/>
</span>
<br/>The selected name:{{selectedItem.name}}
</form>
</body>
</html>
Here is the Plunkr link:
Plunkr for above HTML
However if we select any radio button it does not change the selectedItem value of the scope, because it changes value of selectedItem of the new scope for span, to bind to the parent scope's selectedItem object we have to change the code to....
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
angular.module("sampleapp", []).controller('samplecontroller', function($scope) {
$scope.nameList = [{
name: "Lemon"
}, {
name: "John"
}];
$scope.selectedItem = $scope.nameList[0];
});
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<form>
Select a name fom two names:
<br/>
<span ng-repeat="item in nameList">
<input type="radio" name="name" ng-value="item" ng-model="$parent.selectedItem">{{item.name}}<br/>
</span>
<br/>The selected name:{{selectedItem.name}}
</form>
</body>
</html>
The $parent refers to the parent scope so now we refer to the selectedItem object which is defined in our controller.
The above approach looks simple, however when the radio button goes under a transcluded directive we need to refer something like $parent.$parent....... till we reach the main controller's scope.
Another approach would be doing this in event publish/subscribe pattern.
Here is the implementation:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
angular.module("sampleapp", []).controller('samplecontroller', function($scope, $rootScope) {
$scope.nameList = [{
name: "Lemon"
}, {
name: "John"
}];
$scope.selectedItem = $scope.nameList[0];
$scope.changehappened = function(data) {
$rootScope.$emit('nameselected', data);
};
$rootScope.$on('nameselected', function(evt, data) {
$scope.selectedItem = data;
});
});
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<form>
Select a name fom two names:
<br/>
<span ng-repeat="item in nameList">
<input type="radio" name="name" ng-value="item" ng-model="$parent.s" ng-change="$parent.changehappened(item)">{{item.name}}<br/>
</span>
<br/>The selected name:{{selectedItem.name}}
</form>
</body>
</html>
Thanks for sharing.Keep update your blog
ReplyDeleteAngularjs Training In Hyderabad
ReplyDeleteCome and read us!! We are moving our blog into a new site with a much more pretentious goal. We are going to teach how to be AngularJS Ninjas!!! That's right! We have taken a couple of weeks to prepare our workshop, absolutely free!!!!
AngularJS Certification Training in Chennai
this is a great blog. cloud computing training in chennai
ReplyDelete