AngularJS более одного выбора в одном делении - PullRequest
0 голосов
/ 09 января 2020

Я пытаюсь выбрать более одного в одном div. Но сначала выберите получение собственного списка, и он может появиться, а второй и другие не могут. Я не мог справиться с этим.

Я добавил ссылку на скрипт.

<body>

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

<p>Select a car:</p>

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

<h1>You selected: {{selectedCar.model}}</h1>
<h1>fruits:: {{selectedFruit.type}}</h1>


</div>

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

<script>
    var app2 = angular.module('myFruitsApp',[]);
    app2.controller('myCtrla', function($scope){
        $scope.fruits = [
        {type: "apple"},
        {type: "oranges"},
        {type: "pear"}
        ];
    });
</script>

</body>

1 Ответ

2 голосов
/ 10 января 2020

Используйте только одно приложение и контроллер:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {model : "Ford Mustang"},
        {model : "Fiat 500"},
        {model : "Volvo XC90"}
    ];
    $scope.fruits = [
        {type: "apple"},
        {type: "oranges"},
        {type: "pear"}
    ];
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">        
    <p>Select a car:</p>
    
    <select ng-model="selectedCar" ng-options="x.model for x in cars">
    </select>
    <select ng-model="selectedFruit" ng-options="y.type for y in fruits">
    </select>
    
    <h1>You selected: {{selectedCar.model}}</h1>
    <h1>fruits:: {{selectedFruit.type}}</h1>    
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...