Question

我有多个单选按钮组我需要设置每个组中的一个（也许没有一个）

数据源

html代码

<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
                                            <div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
                                                <div class="switch-field">
                                                    <div class="switch-title">{{att.name}}</div>
                                                    <div>
                                                        <input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}"  value="{{val.val}}" ng-click="mk.AttChange(att.id,val.val)"  />
                                                        <label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

我需要在数据源上使用'Selected'值来设置复选框源更新

Answer 1

您需要使用<ul id="myList"></ul>选择单选按钮。

ng-model保持所选值的位置，如下所示。

ng-model

Here's a JSFiddle

编辑：由于复选框的来源是动态的，因此请为模式绑定到动态选择树。

这是一个例子：

$scope.options = [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}];

$scope.selected = undefined;

var findResult = $scope.options.find(function(x){ return x.Selected == true });

if(findResult){
    $scope.selected = findResult.val;
}

JSFiddle

Answer 2

您是否正在寻找这样的解决方案？

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.selectedTypeAttributesID = [{
      id: 1,
      Values: [{
        val: "red",
        selected: ""
      }, {
        val: "green",
        selected: ""
      }, {
        val: "blue",
        selected: ""
      }]
    },
    {
      id: 2,
      Values: [{
        val: "1",
        selected: ""
      }, {
        val: "2",
        selected: ""
      }, {
        val: "3",
        selected: ""
      }]
    }
  ];
  $scope.setVal = function(att, index, val) {
    for (var k of att.Values) {
      k.selected = "";
    }
    att.Values[index].selected = val;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div class='row'>
    <div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
      <div class="switch-field">
        <div class="switch-title">{{att.name}}</div>
        <div>
          <input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" ng-value="val.val" ng-click="setVal(att, $index, val.val)" />
          <label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
        </div>
      </div>
    </div>
  </div>
  <pre>{{selectedTypeAttributesID | json}}</pre>
</div>

角度单选按钮设置已选中

2 个答案: