Question

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

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

这是如何在下面完成的？现在没有选择收音机。

如果我删除ng-click，那么用户只需单击单选按钮，但如果用户点击li内的文本/标签，我也希望选中单选按钮，这就是我的原因我试图让ng-click li以这种方式工作。

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中选中的单选按钮？

1 个答案: