如何为Select Control的每个下拉值添加复选框

时间:2017-05-17 15:06:52

标签: javascript angularjs

我正在使用Angular JS 1,

我正在动态地将值显示到选择控件中。

这是我的代码

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

http://jsfiddle.net/9fR23/454/

1 个答案:

答案 0 :(得分:0)

您不是在寻找<select>,只需使用ng-repeat来显示您的复选框:

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
  $scope.selectedNames = [];
  
  $scope.select = function(name) {
      var index = $scope.selectedNames.indexOf(name);
      if(index < 0)
		      $scope.selectedNames.push(name);
      else
          $scope.selectedNames.splice(index, 1);
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="n in names">
      <input type="checkbox" ng-click="select(n)"/>{{n}}
  </div> 
  selected: {{selectedNames}}
</div>
&#13;
&#13;
&#13;