如何创建带有选择和取消选择复选框的下拉框,就像使用角度js一样,如下图所示?

问题描述 投票:0回答:2

enter image description here

请帮我在下拉列表中使用angularjs实现下图

html angularjs
2个回答
0
投票

这是一个如何使用单选按钮而不是复选框来解决它的示例。 IMO我认为单选按钮是针对只能选择一个值的复选框,复选框适用于多个状态。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
  $scope.cars = [
    {
      type: 'Audi',
      selected: 'false'
    },
    {
      type: 'BMW',
      selected: 'true'
    },
    {
      type: 'Bentley',
      selected: 'false'
    },
    {
      type: 'Ferrari',
      selected: 'true'
    },
    {
      type: 'Ford',
      selected: 'false'
    },
    {
      type: 'Porsche',
      selected: 'false'
    }
  ];
  $scope.nonSelectedChange = function(){
    $scope.nonSelected = $scope.cars.filter(function(x){return x.selected=='false'}).length;
  };
  $scope.nonSelectedChange();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <div class="container-fluid" ng-app="myApp" ng-controller="myCtrl">
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li>
      	
    <table class="table">
    <tr ng-repeat="car in cars">
      <td><input type="radio" ng-model="car.selected" value="true" ng-change="nonSelectedChange()"/></td>
      <td><input type="radio" ng-model="car.selected" value="false" ng-change="nonSelectedChange()"/></td>
      <td>{{car.type}}</td>
    </tr>
    </table>
      
      </li>
    </ul>
  </div> 
</div>
  
  

0
投票

如果要根据AngularJS中的对象或数组创建下拉列表,则应使用ng-options指令

您还可以使用ng-repeat指令生成相同的下拉列表

使用ng-options进行的下拉菜单允许选定的值为对象,而从ng-repeat进行的下拉列表必须是字符串。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Select a car:</p>

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

<h1>You selected: {{selectedCar.brand}}</h1>
<h2>Model: {{selectedCar.model}}</h2>
<h3>Color: {{selectedCar.color}}</h3>

<p>The visible text inside the dropdown list can also be a property of the value object.</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.