如何在 angularjs 中选中单选按钮

Question

我是 angularjs 和 javascript 的新手，我有一个单选按钮列表，必须选择其中的一些按钮，所以任何朋友都可以告诉我如何实现吗？我尝试了 ng-value=true 但没有成功，我的代码如下：

<ons-list-item modifier="tappable"  ng-repeat="area in vm.AreaList" >
    <label class="radio-button radio-button--list-item line-h45">
        <input type="radio"  ng-bind="area.name"  ng-model="vm.selectedArea" name="area" ng-value="area.code" >
        <div class="radio-button__checkmark radio-button--list-item__checkmark">

        </div>
        {{area.name}}
    </label>
</ons-list-item>

Answer 1

你应该为此使用 ngChecked。

https://docs.angularjs.org/api/ng/directive/ngChecked

    <ons-list-item modifier="tappable"  ng-repeat="area in vm.AreaList" >
        <label class="radio-button radio-button--list-item line-h45">
            <input type="radio"  ng-bind="area.name"  ng-model="vm.selectedArea" name="area" ng-value="area.code" 
                 ng-checked="true">
            <div class="radio-button__checkmark radio-button--list-item__checkmark">
            </div>
            {{area.name}}
        </label>
    </ons-list-item>

Answer 2

一次只能select编辑一个单选按钮。

如果您想要多个 selected 项目，请使用复选框并select，使模型值等于值属性。

Answer 3

你可以在你的控制器中做这样的事情：

 $scope.results = {
      favorites: [{
        id: "WatchList1",
        title: "WatchList1"
      }, {
        id: "WatchList2",
        title: "WatchList2"
      }, {
        id: "WatchList3",
        title: "WatchList3"
      }]
    };

$scope.selectedRow = {
  id: 'WatchList2'
};

$scope.event = {
  type: {
      checked: true
  }
}

和你的html：

<div>
  <div ng-repeat="row in results.favorites">
  <input type="radio" ng-model="selectedRow.id" value="{{ row.id }}" style="opacity: 1;" class="pointer" />
  <span>{{ row.title }}</span>
  </div>
</div>

单箱

如何在 angularjs 中选中单选按钮

how to make radio buttons selected in angularjs

html

radio-button

angularjs