AngularJS無線電選擇已選中

Question

我正在嘗試在創建新用戶時創建選擇，它將需要一個組。 它運行良好，但是由於某些原因“ checked”選項不起作用。 如何將“用戶”設置為選中狀態，如果按下“創建新用戶”按鈕，該設置為true？

 <div class="radio-group" required>
      <h3>Set user group</h3>
    <label class="radio-inline">
      <input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
    </label>

    <label class="radio-inline">
      <input type="radio" name="groupradio" value="1" ng-model="groups.group" checked> User
    </label>

    <label class="radio-inline">
      <input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
    </label>
    </div>
  <button class="btn-sonera" ng-click="createUser(user, groups)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>

Answer 1

使用AngularJs最好的是使用其指令：

ng-checked="variable"

Answer 2

我設法用ng-init="groups.group=1"進行了檢查，因為我需要分配給無線電的值。 用這種方式有什么問題嗎？

完整代碼

<div class="radio-group" required>
  <h3>Set user group</h3>
<label class="radio-inline">
  <input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>

<label class="radio-inline">
  <input type="radio" name="groupradio" value="1" ng-model="groups.group" ng-init="groups.group=1"> User
</label>

<label class="radio-inline">
  <input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>

Answer 3

您可以使用ng-value嘗試嗎

  <label> <input type="radio" ng-model="groups.group" value="1"> Admin </label><br/> <label> <input type="radio" ng-model="groups.group" value="2"> User </label><br/> <label> <input type="radio" ng-model="groups.group" value="3"> Viewer </label><br/> in controller 

<label> <input type="radio" ng-model="groups.group" value="1"> Admin </label><br/> <label> <input type="radio" ng-model="groups.group" value="2"> User </label><br/> <label> <input type="radio" ng-model="groups.group" value="3"> Viewer </label><br/> in controller

  $scope.createUser = function(user, groups){ groups.group = "2"; }; 

Answer 4

這是一個工作正常的插件： https ://plnkr.co/edit/4VtblBSWROLTETW5Ie5C ? p = preview

核心代碼：

  $scope.groups = {
    admin : false, 
    user: false, 
    viewer: false
  };

並在視圖中：

<button class="btn-sonera" ng-click="groups.user=true"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>

注意每個ng模型如何綁定到一個對象，即：groups.admin，groups.user等。