AngularJS two-way data binding not working properly in directive -


i trying implement radio-button list using ng-repeat. typelist.html

<div ng-repeat="type in types" >     <input type="radio" id={{type.id}} name="{{type.name}}"  ng-model="result" ng-value="type.id" >     {{type.name}}     <div> result {{result}} </div> //result changing in row of clicked radio-button. should change in every row.(two way data-binding). </div> 

directive:

angular.module('app').directive('mylist',function(){         return{             restrict: 'a',             scope: {                 types: '=',   //here list passed printed ng-repeat                 result: '='   //here want store radio-button selected last time id             },             templateurl: 'html/typelist.html'         };       }); 

directive has isolated scope. passing 2 parameters. list printed radio buttons , result object stores answer(id-what radio button clicked last time) in parent scope. unfortunately whenever click on radio-buttons result changing locally.

 passing parameters directive.  <div my-list types="list" result="selected"></div>      passed list , result paramater controller mylist directive.   $scope.list   = [         { id: 1, name:'name 1' },         { id: 2, name:'name 2' },         { id: 3, name:'name 3' }     ];  $scope.selected = -1; 

i grateful help.

you have pass non-primitive object model reference two-war binding. wrap selected object reference.

in controller use.

$scope.list = [{     id: 1,     name: 'name 1'   }, {     id: 2,     name: 'name 2'   }, {     id: 3,     name: 'name 3'   }];   $scope.ctrlmodel = {     selected: -1   } 

and in markup 'html/typelist.html'

<div ng-repeat="type in types" >   <input type="radio" id={{type.id}} ng-model="result.selected" ng-value="type.id" >      {{type.name}} </div> result {{result.selected}} 

working fiddle demo

hope helps.


Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -