Angular JS multiple select無法獲取所選值

我正在嘗試使用Angular JS填充多個選擇選項。這是我的名單Angular 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）我試圖默認值設置爲Any，我不能夠設置。

2）我試圖讓所選擇的價值，做了警報（$ scope.depositoryId.value.depos）。它給了我一個未定義的警報消息

我要去哪裏錯了

來源

2017-02-17 Praveen

最後編輯：

顯示任何─任何沒有任何突破，並獲得選擇了NG-模型值

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>

來源

2017-02-17 21:31:41 nivas

我能夠顯示列表，我想的第一個值[任意]至默認選擇。我也試圖找回控制器的價值 – Praveen

我改了代碼，它會解決這兩個問題 – nivas

本身先試了一下，現在也試過了。它沒有工作:( – Praveen

如需更優雅的解決方案，豪特硬編碼的初始值，因爲你有你的數組中所需要的字符串，你可以這樣做：

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

來源

2017-02-17 22:07:26 Jax

我正在嘗試實現多選select dropdown – Praveen

我的不好，錯過了這個要求，現在在[plunkr]（http://plnkr.co/edit/P65CP6H4Hu5MZkc1vRwZ?p=preview）中已修復 – Jax

當我嘗試顯示它作爲鍵值對自動斷開，例如：Any-Any，MUM-MUMBAI – Praveen

Angular JS multiple select無法獲取所選值

回答

相關問題