多次选择单选按钮值Angularjs

Question

我从变量列表中创建了多个单选按钮，我希望能够选择任何一个按钮并能够重复选择它。 我编写的代码只允许我选择一次选项，当我选择之前已经选择的选项时，它不会让我选择。 请帮我解决一下这个。 我只在下面粘贴了与我的问题相关的代码部分。请忽略任何语法错误并建议是否可以通过其他更好的方式来实现。

$scope.protocols = ['L3 Sanity', 'L2 Sanity', 'ROUTING', 'STP', 'VLAN', 'Interface Scale', 'VLAN SCALE'];
$scope.reserveTB = function selectPT(PT) {
			  $scope.option=PT;
      };

<h3>Choose the protocol suite:</h3>
<label ng-repeat="protoName in protocols">
<input type="radio" name ="PTCL" 
       ng-model="selectedPT" value="{{protoName}}" 
       ng-change='selectPT(selectedPT)'>{{protoName}}<br>
</label>
<div>
<h3>Selected option:</h3>
<br>{{option}}
</div>

Answer 1

根据您的 qstn，您有多个 radio buttons 选项，但想随时选择 1 并且还想取消选择它。 理想情况下，checkboxes 似乎是正确的选择。

但如果您需要使用单选按钮，请参阅下面的代码。

另外，您的ng-model 应该是hierarchical （其中必须有点（.）。）， 因为ng-repeat 创建了新的child scope.，并且您的属性被新范围覆盖。

工作代码：

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
  $scope.valChanged = false;
  $scope.protocols = ["L3 Sanity", "L2 Sanity", "ROUTING", "STP", "VLAN", "Interface Scale", "VLAN SCALE"];
  $scope.data = {selectedPT: $scope.protocols[0]};

  $scope.toggle = function() {
    if (!$scope.valChanged) {
      $scope.data.selectedPT = "";
    }
    $scope.valChanged = false;
  }
  $scope.changefn = function(){
    $scope.valChanged = true;
    // you have updated value of $scope.data.selectedPT, 
    // and can do watever you want, like service call
  }
});

<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <h3>Choose the protocol suite:</h3>
    <div ng-repeat="protoName in protocols track by $index">
       <input type="radio" name ="PTCL{{$index}}" 
       ng-model="data.selectedPT" 
       ng-value="protoName" 
       ng-change="changefn()"
       ng-click="toggle()">{{protoName}}
   </div>
    <div>
      <h3>Selected option : {{data.selectedPT}}</h3>      
    </div>
  </div>
</div>

Answer 2

ng-change 函数名应该是selectPT

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.protocols = ['L3 Sanity', 'L2 Sanity', 'ROUTING', 'STP', 'VLAN', 'Interface Scale', 'VLAN SCALE'];
$scope.selectPT = function (PT) { 
			  $scope.option=PT;
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <h3>Choose the protocol suite:</h3>
<label ng-repeat="protoName in protocols">
<input type="radio" 
       ng-model="selectedPT" value="{{protoName}}" 
       ng-change='selectPT(selectedPT)'>{{protoName}}<br>
</label>
<div>
<h3>Selected option:</h3>
<br>{{option}}
</div>
</div>