ng-repeat中的角度设置默认单选

时间:2018-09-11 00:09:38

标签: angularjs

我向用户提出一个简单的是/否答案问题,并且我想选择一个默认单选按钮。问题是我可以向用户提出任何数量的这些问题。

这是我的代码:

<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]">  
     <div data-ng-repeat="option in closeListingOptions" class="radio">
          <label>
               <input type="radio" name="close" ng-model="i.close" value="{{option.id}}" ng-checked="option.checked" />{{option.name}}</strong>
          </label>
     </div>
</div>

我的选项设置如下:

$scope.closeListingOptions = [
        {
            id: "1",
            name: "Yes please",
            checked: true
        },
        {
            id: "0",
            name: "No thanks",
            checked: false
        }     
];

上面的示例有效并将默认设置“是”选中/设置为“是”。但是,除非我通过鼠标手动选择一个选项,否则该值不会绑定到模型。

我已经读到ng-select不应该与ng-options一起使用,但是我不确定我还能如何实现这个目标?看来我需要类似的东西:

i.close = "1":

但是由于我不知道会出现多少个问题,我该如何为未知的数量设置这个值?

3 个答案:

答案 0 :(得分:1)

1-可以使用value={{something}}指令代替ng-value

2-每个输入包应有其特定的name

这是一个有效的示例:

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {

  $scope.offers = [{
      number: 1
    },
    {
      number: 2
    }
  ];


  $scope.closeListingOptions = [{
      id: "1",
      name: "Yes please",
      checked: true
    },
    {
      id: "0",
      name: "No thanks",
      checked: false
    }
  ];
});
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-form ng-repeat="i in offers" name="messageForm[$index]">
    <div data-ng-repeat="option in closeListingOptions" class="radio">
      <label>
               <input type="radio" name="close-{{i.number}}" ng-model="i.close" ng-value="option.id" ng-checked="option.checked" />{{option.name}}</strong>
          </label>
    </div>
    {{i}}
    <hr>
  </div>

</body>

</html>

答案 1 :(得分:0)

您应该尝试以下操作:

<input type="radio" name="close" 
    ng-model="option.checked" value="{{option.id}}"
    ng-checked="option.checked" />{{option.name}}</strong>

ng-model将更新数据数组的checked键,然后您可以从该单个变量中按其ID获取所有单选按钮选择。

希望这会有所帮助。

答案 2 :(得分:0)

我无法达到以下目标:

<div data-ng-repeat="option in closeListingOptions" class="radio" ng-init="i.closeListing = 1">
  <label>
    <input type="radio" name="close-{{i.id}}" ng-model="i.closeListing" ng-value="{{option.id}}" />
        <strong>{{option.name}}</strong>
    </label>
</div>

解决方案是使用ng-init