2017-02-17 7 views
0

Я пытаюсь заполнить параметр множественного выбора, используя Angular JS. Это мой списокУгловой JS multiple select не может получить выбранное значение

var depositoryList =[ 
{ 
    "depos":"Any", 
    "deposName":"Any" 
}, 
{ 
    "depos":"DUB", 
    "deposName":"DUBAI" 
}, 
{ 
    "depos":"MUM", 
    "deposName":"MUMBAI" 
}, 
{ 
    "depos":"SNG", 
    "deposName":"SINGAPORE" 
}], 
// didnt Work 
$scope.depositoryId = {value:{depos:'Any'}} 

Это, как я заполнить его в HTML

<select multiple 
ng-model="depositoryId.value" 
data-ng-options="obj.depos + ' - ' + obj.deposName for obj in depositoryList track by obj.depos"> 
</select> 

1) Я пытался установить значение по умолчанию для любой и я не смог установить их.

2) Я попытался получить выбранное значение и сделал предупреждение ($ scope.depositoryId.value.depos). Его дает мне сообщение неопределенному оповещений

, где я буду неправильно

ответ

1

Final Edit:

Показать Any- Любой без перерыва и получить значение выбранные в нг-модели

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', function ($scope) { 
 
    $scope.depositoryId = ['Any']; 
 
    $scope.depositoryList =[ 
 
{ 
 
    "depos":"Any", 
 
    "deposName":"Any" 
 
}, 
 
{ 
 
    "depos":"DUB", 
 
    "deposName":"DUBAI" 
 
}, 
 
{ 
 
    "depos":"MUM", 
 
    "deposName":"MUMBAI" 
 
}, 
 
{ 
 
    "depos":"SNG", 
 
    "deposName":"SINGAPORE" 
 
}]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
    <head></head> 
 
    <body ng-controller="MainCtrl"> 
 
    <select multiple="true" ng-model="depositoryId" ng-options="obj.depos as (obj.depos + ' - ' +obj.deposName) for obj in depositoryList"> 
 
</select> 
 
<div>{{depositoryId}}</div> 
 
    </body> 
 
</html>

+0

Я могу отобразить список, я хочу, чтобы первое значение [Любой] будет выбран по умолчанию. Я также пытаюсь получить значение обратно в контроллере – Praveen

+0

Я изменил код, он решит обе проблемы – nivas

+0

попробовал это сам, сам тоже попробовал. Это не сработало :( – Praveen

1

Для более элегантного решения остроумия Хут жестко прописывать начальное значение, так как у вас есть строка, необходимый в вашем массиве, вы можете сделать:

<select multiple='true' ng-init="depositoryInitialValue = depositoryList[0].deposName" 
         ng-model="depositoryInitialValue" 
         ng-options="obj.depos as (obj.depos + ' - ' + obj.deposName) for obj in depositoryList"> 

</select> 

См plunkr here

надеюсь, что это помогает.

var app = angular.module('ngApp', []); 
 

 
app.controller('MainCtrl', ['$scope', function($scope) { 
 
    'use strict'; 
 

 
    $scope.depositoryList = [{ 
 
    "depos": "Any", 
 
    "deposName": "Any" 
 
    }, { 
 
    "depos": "DUB", 
 
    "deposName": "DUBAI" 
 
    }, { 
 
    "depos": "MUM", 
 
    "deposName": "MUMBAI" 
 
    }, { 
 
    "depos": "SNG", 
 
    "deposName": "SINGAPORE" 
 
    }] 
 

 

 
}]);
<!DOCTYPE html> 
 
<html ng-app="ngApp"> 
 

 
<head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>maxisam's ngApp</title> 
 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
</head> 
 

 
<body ng-controller="MainCtrl" class="container"> 
 
    <br/> 
 

 
    <select multiple='true' ng-init="depositoryInitialValue = depositoryList[0].deposName" ng-model="depositoryInitialValue" ng-options="obj.depos as (obj.depos + ' - ' + obj.deposName) for obj in depositoryList"> 
 
    </select> 
 
    <br /> {{depositoryInitialValue}} 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</body> 
 

 
</html>

+0

Я пытаюсь реализовать раскрывающееся меню с множественным выбором – Praveen

+0

. Мой плохой, пропустил это требование, которое исправлено в [plunkr] (http://plnkr.co/edit/P65CP6H4Hu5MZkc1vRwZ?p=preview) сейчас – Jax

+0

Когда я пытаюсь отобразить он как пара ключ-значение автоматически разбивается, например: Any-Any, MUM-MUMBAI – Praveen

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