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
Post a Comment