Как сделать это приложение мульти-выбрать?

Я хочу ниже angularjs код, как этот пример здесь . «, «следует добавлять после каждого выбранного цвета. Как этот красный, белый, черный

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

3 ответа

  1. selectbox для «one 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>
    
        <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>

  2. Попробуйте несколько выберите выпадающее меню, как показано ниже.

    <select multiple="true" ng-model="selectedCar" ng-options="x.model for x in cars"></select>
    
  3.     <!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>

    это именно то, что я хочу