AngularJS 双向数据绑定在指令中无法正常工作 [英] AngularJS two-way data binding not working properly in directive

问题描述

我正在尝试使用 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}} </div>//结果仅在单击的单选按钮行中发生变化.它应该在每一行中改变.(双向数据绑定).

指令:

angular.module('app').directive('myList',function(){返回{限制:'A'，范围: {types: '=',//这里的列表被传递以使用 ng-repeat 打印result: '='//这里我想存储上次通过 id 选择的单选按钮},templateUrl: 'html/typeList.html'};});

指令具有独立的范围.我正在传递两个参数.使用单选按钮和结果对象打印的列表，该对象在父作用域中存储答案(id-上次单击的单选按钮).不幸的是，每当我点击单选按钮时，我的结果只会在本地发生变化.

 将参数传递给我的指令.<div my-list types="list" result="selected"></div>将列表和结果参数从控制器传递到 myList 指令.$scope.list = [{ id: 1, name:'姓名 1' },{ id: 2, name:'姓名 2' },{ id: 3, name:'姓名 3' }];$scope.selected = -1;

如有任何帮助，我将不胜感激.

解决方案

您必须将一个非原始对象传递给模型以获取其对两战绑定的引用.只需将 selected 包装到一个对象中以供参考.

在您的控制器中使用.

$scope.list = [{编号:1，name: '名字 1'}, {编号:2，name: '名字 2'}, {编号:3，name: '名字 3'}];$scope.ctrlModel = {选择:-1}

在'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}}

结果{{result.selected}}

工作 小提琴演示

希望有帮助.

i am trying to 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 is changing only in the row of clicked radio-button. It should change in every row.(two way data-binding).
</div>

Directive:

angular.module('app').directive('myList',function(){
        return{
            restrict: 'A',
            scope: {
                types: '=',   //here list is passed to be printed with ng-repeat
                result: '='   //here I want to store which radio-button was selected last time by id
            },
            templateUrl: 'html/typeList.html'
        };


    });

Directive has isolated scope. I am passing two parameters. List to be printed with radio buttons and result object which stores answer(id-what radio button was clicked last time) in parent scope. Unfortunately whenever i click on radio-buttons my result is changing only locally.

 Passing parameters to my directive.
 <div my-list types="list" result="selected"></div>



  Passed list and result paramater from controller to myList directive.

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

$scope.selected = -1;

I would be grateful for any help.

解决方案

You have to pass a non-primitive object to the model to get its reference for two-war binding. Just wrap selected into an object for its reference.

In your 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 the Markup that is '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 it helps.

这篇关于AngularJS 双向数据绑定在指令中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！