如何正确建立标记无线电输入指令的AngularJS？ [英] How do I properly build an AngularJS labeled radio input directive?

问题描述

我意识到AngularJS已经有一个输入[单选] 指令，我希望利用尽可能多尽可能。

我创建了一个的jsfiddle这里，但我无法弄清楚如何获得NG-模型属性才能正常工作。我选择每个无线电，但是了selectedValue不改变

另外，请告诉我什么，我做错了这里。我敢肯定，我可以做一些其他的改进。

中的HTML：

 ＆LT; D​​IV数据-NG-控制器=控制器＆GT;
    ＆LT; D​​IV
      数据-NG-重复=电台的收音机
      数据-NG-模式=了selectedValue
      数据-NAME =收音机1
      数据标签={{radio.label}}
      数据值={{radio.value}}
      数据标记的广播GT;＆LT; / DIV＆GT;
    ＆LT; BR＆GT;
    选择的值：{{了selectedValue}}
＆LT; / DIV＆GT;
 

JavaScript的：

  angular.module（应用，[]）
.controller（控制器，函数（$范围）{
    $ scope.selectedValue ='富';
    $ scope.radios = [
        {标号：'富'，值：'富'}，
        {标签：'棒'，值：'BAR'}
    ];
}）
.directive（'labeledRadio'，函数（）{
    返回{
        要求：['ngModel'，'值']，
        限制：'A'，
        更换：真实，
        模板：
            '＆LT;标签类=无线电＆GT;，
            '＆LT;输入类=radio__input类型=电台数据-NG-模式=ngModelNAME ={{名}}VALUE ={{值}}＆GT;，
            '＆LT;跨度类=radio__label＆GT; {{标签}}＆​​LT; / SPAN＆GT;，
            '＆LT; /标签＆gt;
        ]。加入（''），
        范围： {
            ngModel：'='，
            标签： '@'，
            名称： '@'，
            值：'@'
        }
    }
}）;
 

的由于原型继承JavaScript中的工作方式解决方案

，你不能在范围为2路数据绑定使用primatives。因此，要解决这个问题的办法是改变了selectedValue 来的对象...

  angular.module（应用，[]）
.controller（控制器，函数（$范围）{
    $ scope.selectedValue = {值：'富'};
    $ scope.radios = [
        {标号：'富'，值：'富'}，
        {标签：'棒'，值：'BAR'}
    ];
}）＆LT; D​​IV数据-NG-控制器=控制器＆GT;
    ＆LT; D​​IV
      数据-NG-重复=电台的收音机
      数据-NG-模式=selectedValue.value
      数据-NAME =收音机1
      数据标签={{radio.label}}
      数据值={{radio.value}}
      数据标记的广播GT;＆LT; / DIV＆GT;
    ＆LT; BR＆GT;
    选择的值：{{selectedValue.value}}
＆LT; / DIV＆GT;
 

小提琴： http://jsfiddle.net/gdnKW/

有关完整说明，在这里看到： https://github.com/角/ angular.js /维基/了解，斯科普斯

I realize that AngularJS already has an input[radio] directive and I want to leverage that as much as possible.

I created a JSFiddle here, but I can't figure out how to get the ng-model property to work properly. I'm selecting each radio, but the selectedValue doesn't change.

Also, please tell me anything that I'm doing wrong here. I'm sure I could make some other improvements.

The HTML:

<div data-ng-controller="controller">
    <div
      data-ng-repeat="radio in radios"
      data-ng-model="selectedValue"
      data-name="radio1"
      data-label="{{radio.label}}"
      data-value="{{radio.value}}"
      data-labeled-radio></div>
    <br>
    selected value: {{selectedValue}}
</div>

The JavaScript:

angular.module('app', [])
.controller('controller', function($scope) {
    $scope.selectedValue = 'FOO';
    $scope.radios = [
        { label: 'foo', value: 'FOO' },
        { label: 'bar', value: 'BAR' }
    ];
})
.directive('labeledRadio', function(){
    return {
        require: ['ngModel', 'value'],
        restrict: 'A',
        replace: true,
        template: [
            '<label class="radio">',
            '  <input class="radio__input" type="radio" data-ng-model="ngModel" name="{{name}}" value="{{value}}">',
            '  <span class="radio__label">{{label}}</span>',
            '</label>'
        ].join(''),
        scope: {
            ngModel: '=',
            label: '@',
            name: '@',
            value: '@'
        }
    }
});

解决方案

Because of the way prototypal inheritance works in JavaScript, you can't use primatives on the scope for 2-way databinding. Therefore the way to fix this is to change selectedValue to an object...

angular.module('app', [])
.controller('controller', function($scope) {
    $scope.selectedValue = { value: 'FOO' };
    $scope.radios = [
        { label: 'foo', value: 'FOO' },
        { label: 'bar', value: 'BAR' }
    ];
})

<div data-ng-controller="controller">
    <div
      data-ng-repeat="radio in radios"
      data-ng-model="selectedValue.value"
      data-name="radio1"
      data-label="{{radio.label}}"
      data-value="{{radio.value}}"
      data-labeled-radio></div>
    <br>
    selected value: {{selectedValue.value}}
</div>

Fiddle: http://jsfiddle.net/gdnKW/

For a full explanation, see here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

这篇关于如何正确建立标记无线电输入指令的AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！