Sunday, June 15, 2014

ng:repeat and radio button problems

We all know ng-repeat creates it's own scope for each repeated item. Take the following example

<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>



Share:

2 comments:



  1. Come 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

    ReplyDelete