javascript - AngularJS input.radio 初始选择

Question

我正在尝试初始化/选择组中的特定单选按钮。我想将索引号传递给名为“selected-item”的属性。

---

HTML

<div class="top">
    <radio-buttons model="colour" selected-item="1" items='colours'></radio-buttons>
    <div>{{colour}}</div>
</div>

<div class="center">
    <radio-buttons model="day" selected-item="2" items='days'></radio-buttons>
    <div>{{day}}</div>
</div>

<div class="bottom">
     <radio-buttons model="phone" selected-item="3" items="phones"></radio-buttons>
     <div>{{phone}}</div>
</div>

---

指令:

directives.directive('radioButtons', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            items: '=',
            selectedItem: '@'
        },
        templateUrl: 'template/radio-group.html',
        link: function(scope) {
            console.log(scope.selectedItem);
            scope.onItemChange = function(item) {
                console.log(item);
                scope.model = item;
            };
        }
    };
});

---

模板:radio-group.html:

<div ng-repeat='item in items'>
    <input
       type="radio"
       name="{{item.group}}"
       ng-value="{{item.value}}"
       ng-model="model"
       ng-change="onItemChange(item)"/>
       {{item.text}}
</div>

---

Controller

$scope.colours= [ {
    text: "Pink",
    value: 5,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}, {
    text: "Yellow",
    value: 6,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}, {
    text: "Blue",
    value: 7,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}, {
    text: "Green",
    value: 8,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}
];

$scope.days = [ {
    text: "Monday",
    value: 9,
    group: "dayGroup"
    }, {
    text: "Tuesday",
    value: 10,
    group: "dayGroup"
    }, {
    text: "Wednesday",
    value: 11,
    group: "dayGroup"
    }, {
    text: "Thursday",
    value: 12,
    group: "dayGroup"
    }
];

$scope.phones = [ {
    text: "Android",
    group: "phoneGroup",
    value: 13
}, {
    text: "iOS",
    group: "phoneGroup",
    value: 14
}, {
    text: "Blackberry",
    group: "phoneGroup",
    value: 15
}];

任何帮助都会很棒!

干杯。

Answer 1

尝试将 ng-value="{{item.value}}" 更改为 value="{{item.value}}"。

然后将 ng-checked="$index == (selectedItem - 1)" 添加到模板中的输入。

或者:ng-checked="$index == (selectedItem - 1) || $first" 或使用 $last，如果你希望它选择某些内容如果您尝试超出范围的索引。