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

问题描述

我意识到 AngularJS 已经有一个 input[radio] 指令，我想尽可能多地利用它.

我在这里创建了一个 JSFiddle，但我不知道如何获得 ng-模型属性才能正常工作.我正在选择每个收音机，但 selectedValue 不会改变.

另外，请告诉我我在这里做错了什么.我相信我可以做一些其他的改进.

HTML:

JavaScript:

angular.module('app', []).controller('controller', function($scope) {$scope.selectedValue = 'FOO';$scope.radios = [{标签:'foo'，值:'FOO'}，{标签:'bar'，值:'BAR'}];}).directive('labeledRadio', function(){返回 {要求:['ngModel'，'值']，限制:'A'，替换:真的，模板: ['<label class="radio">',' <input class="radio__input" type="radio" data-ng-model="ngModel" name="{{name}}" value="{{value}}">',' <span class="radio__label">{{label}}</span>','</标签>'].加入('')，范围: {ngModel: '=',标签: '@'，姓名: '@'，价值: '@'}}});

解决方案

由于原型继承在 JavaScript 中的工作方式，您不能在 2 路数据绑定的作用域上使用原语.因此，解决此问题的方法是将 selectedValue 更改为对象...

angular.module('app', []).controller('controller', function($scope) {$scope.selectedValue = { value: 'FOO' };$scope.radios = [{标签:'foo'，值:'FOO'}，{标签:'bar'，值:'BAR'}];})<div data-ng-controller="控制器">

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

有关完整说明，请参见此处:https://github.com/angular/angular.js/wiki/Understanding-Scopes

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