如何使用 ng-click / ng-change 将单选按钮标记为已在 Angular 中选中？

Question

http://plnkr.co/edit/rXWUUjLtJi79z2hF1uVX?p=preview

我有一个非常简单的 plnkr，基本上当 li 元素被点击时我想要检查单选按钮。

下面是如何实现的？现在没有选择任何收音机。

如果我删除 ng-click，那么用户只需单击单选按钮，但如果用户单击 li 内部的 text/label，我还希望选中单选按钮这就是为什么我试图让 li 上的 ng-click 以这种方式工作。

angular.module('app', [])

.controller('mainController', ['$scope', '$rootScope',
                              function($scope,$rootScope) {
                                
  $scope.toggleTags = function(type) {
    console.log(type);
    switch(type) {
      case 'watchlist':
        $scope.watchlist = true;
        $scope.private   = false;
        break;

      case 'private':
        $scope.watchlist = false;
        $scope.private   = true;
        break;
    }
  };
  
}]);

body { font-family: Arial, sans-serif; }

li {
  margin: 10px;
  list-style: none;
  width: 100%;
  clear: both;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="mainController">
      
    <ul>
        <li ng-click="toggleTags('watchlist')">
          <input type="radio"
                 name="personalGroup"
                 ng-model="watchlist"
                 ng-change="toggleTags('watchlist')"
                 value="watchlist">
                 My Watchlist
        </li>

        <li ng-click="toggleTags('private')">
          <input type="radio"
                 name="personalGroup"
                 ng-model="private"
                 ng-change="toggleTags('private')"
                 value="private">
                 My Private Tags
        </li>
    </ul>
    
  </body>

Answer 1

对于这个示例，我不会使用 ng-click 来执行此操作。相反，我会使用 HTML DOM 对象 <label for="radio_button_id_here">.

HTML

<li>
  <input type="radio" name="personalGroup" ng-model="watchlist" value="watchlist" id="watchlist">
  <label for="watchlist">My Watchlist</label>
</li>

<li>
  <input type="radio" name="personalGroup" ng-model="private" value="private" id="private">
  <label for="private">My Private Tags</label>
</li>

如何使用 ng-click / ng-change 将单选按钮标记为已在 Angular 中选中？

How to mark a radio button as checked in Angular with ng-click / ng-change?

javascript

angularjs

angularjs-ng-click