如何使這個應用程序多選？

我想要下面這樣的angularjs代碼，像這樣example here。 「，」應該在我選擇的每種顏色之後添加。像這樣紅，白，黑如何使這個應用程序多選？

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

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

 
<p>Select a car:</p> 
 

 
<select ng-model="selectedCar" ng-options="x.model for x in cars"> 
 
</select> 
 

 
<h1>You selected: {{selectedCar.model}}</h1> 
 
<p>Its color is: {{selectedCar.color}}</p> 
 

 
</div> 
 

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

 

 
</body> 
 
</html>

來源

2016-05-25 Rehaan Kkhaan

感謝ü這麼多 –

選擇框是 '一個選擇'

使用複選框


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

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

 
    <p>Select a car:</p> 
 

 
    <span ng-repeat="x in cars"> 
 
    <input type='checkbox' ng-model='x.checked'/>{{x.color}} 
 
    </span> 
 

 
    <h1>You selected: {{checkedModels()}}</h1> 
 
    <p>Its color is: {{checkedColors()}}</p> 
 

 
    </div> 
 

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

 
     $scope.checkedColors = function(){ 
 
     var checkedArr = $filter('filter')($scope.cars, {checked : true}); 
 
     var text = ''; 
 
     for(var i = 0 ; i < checkedArr.length ; i++) { 
 
if(text.length != 0){text += ','} 
 
text += checkedArr[i].color; 
 
} 
 
return text; 
 
} 
 

 
$scope.checkedModels = function(){ 
 
     var checkedArr = $filter('filter')($scope.cars, {checked : true}); 
 
     var text = ''; 
 
     for(var i = 0 ; i < checkedArr.length ; i++) { 
 
if(text.length != 0){text += ','} 
 
text += checkedArr[i].model; 
 
} 
 
return text; 
 
} 
 

 

 
    }); 
 
    </script> 
 

 

 
    </body> 
 
    </html>

來源

2016-05-25 08:36:58

儘量多選擇下拉列表如下圖所示。

<select multiple="true" ng-model="selectedCar" ng-options="x.model for x in cars"></select>

來源

2016-05-25 08:42:26

多個=「TR什麼ue「不工作onclick –

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

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

 
    <p>Select a car:</p> 
 

 
    <span ng-repeat="x in cars"> 
 
    <input type='checkbox' ng-model='x.checked'/>{{x.color}} 
 
    </span> 
 

 
    <h1>You selected: {{checkedModels()}}</h1> 
 
    <p>Its color is: {{checkedColors()}}</p> 
 

 
    </div> 
 

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

 
     $scope.checkedColors = function(){ 
 
     var checkedArr = $filter('filter')($scope.cars, {checked : true}); 
 
     var text = ''; 
 
     for(var i = 0 ; i < checkedArr.length ; i++) { 
 
if(text.length != 0){text += ','} 
 
text += checkedArr[i].color; 
 
} 
 
return text; 
 
} 
 

 
$scope.checkedModels = function(){ 
 
     var checkedArr = $filter('filter')($scope.cars, {checked : true}); 
 
     var text = ''; 
 
     for(var i = 0 ; i < checkedArr.length ; i++) { 
 
if(text.length != 0){text += ','} 
 
text += checkedArr[i].model; 
 
} 
 
return text; 
 
} 
 

 

 
    }); 
 
    </script> 
 

 

 
    </body> 
 
    </html>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/multiselect/angular"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="example" ng-app="KendoDemos"> 
 
    <div class="demo-section k-content" ng-controller="MyCtrl"> 
 
     <h4>Select product</h4> 
 
     <select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds"></select> 
 
     <p ng-show="selectedIds.length" style="padding-top: 1em;">Selected: {{ selectedIds }}</p> 
 
    </div> 
 
</div> 
 

 
<script> 
 
    angular.module("KendoDemos", [ "kendo.directives" ]) 
 
    .controller("MyCtrl", function($scope){ 
 
     $scope.selectOptions = { 
 
      placeholder: "Select products...", 
 
      dataTextField: "ProductName", 
 
      dataValueField: "ProductID", 
 
      valuePrimitive: true, 
 
      autoBind: false, 
 
      dataSource: { 
 
       type: "odata", 
 
       serverFiltering: true, 
 
       transport: { 
 
        read: { 
 
         url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products", 
 
        } 
 
       } 
 
      } 
 
     }; 
 
     $scope.selectedIds = [ 4, 7 ]; 
 
     }) 
 
</script> 
 

 

 
</body> 
 
</html>

這正是我想要

來源

2016-06-08 16:06:11

如何使這個應用程序多選？

回答

相關問題