angular 把select 修改radio

之前的代码是这样的
<select class="planstatus-select" ng-model="planStatus" ng-options="planStatus.id as planStatus.name for planStatus in planStatuses" ng-change="planStatusChange()"></select>，效果是这样

现在改成这种状态

代码写成这样

       <input type="radio" name="a" value="planStatus.name" ng-model="planStatus" ng-click="planStatusChange()"> {{planStatus.name}}

</label>
出现问题请大神帮忙 input ng-model 应该绑定谁 name 和value该如何写

首先：既然是单选按钮，那么它们的name属性都是一样，ng-model也是一样；然后将input的value赋值成planStatuses中每一项的id，再在每个单选input元素后面加上对应的文字内容。click事件的话，直接在函数中取$scope.planStatus的值再做相应的处理。

<label data-ng-repeat="_v in planStatuses">
<input type="radio" name="planStatus" value="{{_v.id}}" data-ng-model="planStatus" data-ng-click="planStatusChange()" />{{_v.name}}
</label>

value 换成 id value="planStatus.id" ng-click 用ng-change

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
    <meta charset="UTF-8">
    <title>angularjs radio</title>
    <script src="//cdn.bootcss.com/angular.js/1.4.1/angular.min.js"></script>
</head>
<body ng-controller="RootController">
<form action="">
    <label ng-repeat="item in planStatuses">
        <input type="radio" name="planStatus" ng-model="$parent.planStatus" value="{{item.value}}">{{item.text}}
    </label>
    <p>您选择的是:{{planStatus}}</p>
</form>
<script>
    angular.module('demo', [])
            .controller('RootController', function ($scope) {
                $scope.planStatus = 2;
                $scope.planStatuses = [
                    {value: 0, text: '全部'},
                    {value: 1, text: '未开始'},
                    {value: 2, text: '进行中'},
                    {value: 3, text: '已结束'},
                    {value: 4, text: '草稿'},
                    {value: 5, text: '异常'}
                ];
            });
</script>
</body>
</html>

【热门文章】