Как сделать это приложение multi-select?

Я хочу, чтобы ниже код angularjs вот так example here. "," следует добавлять после каждого выбранного цвета. Как это красный, белый, черныйКак сделать это приложение multi-select?

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

несколько = «тр 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

Как сделать это приложение multi-select?

ответ

Смежные вопросы