ng:repeat and radio button problems
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>
