Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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>

Answer 2

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

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

另外，您的ng-model应为hierarchical （必须包含点（。）），，因为ng-repeat会创建新的child scope.并且你的财产被新范围所覆盖。

工作代码：

＆＃13;

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
  }
});

＆＃13;

<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>

＆＃13;

选择Angularjs多次单选按钮值

2 个答案: