2017-08-27 102 views
0

我有2個選擇選項,將從不同的來源動態填充,但現在我爲我的示例使用靜態對象。
我想將原始範圍中的id1與沃爾沃映射到映射範圍內具有id2的沃爾沃。AngularJS將一個選擇選項映射到另一個

因此,只要頁面加載,如果相似的字段名稱存在,它們將被映射。 到目前爲止,它只是選擇時,將原始範圍中的id1映射到mapme範圍中的id1。

任何關於如何做角度映射的幫助將不勝感激。

angular.module('myApp',[]) 
    .controller('myController',function($scope,$timeout){ 
    $scope.original=[{"id":"id1", "text":"volvo"}, {"id":"id2", "text":"toyota"}]; 
    $scope.mapme=[{"id":"id1", "text":"toyota"}, {"id":"id2", "text":"volvo"}]; 

    }); 

<div ng-app="myApp"> 
    <div ng-controller="myController"> 

    original <select ng-model="model.id" ng-options="original.id as original.text for original in original" ></select> 

    {{model.id}} 

    <br> 
    mapme <select ng-model="model.id" ng-options="map.id as map.text for map in mapme" ></select> {{model.id}} 

    </div> 

</div> 
+0

它不清楚什麼是預期的行爲。你想設置初始值嗎? –

+0

我有2個選擇框原始選擇框和其他映射選擇框,所以可以說如果我選擇沃爾沃在原始選擇框比映射選擇框沃爾沃也應該得到選擇...唯一是沃爾沃在原來的選擇框是在映射選擇框中的id1和volvo位於id2上 – user3548161

回答

2

如何兩相模態和ng-change功能會做的映射,但你需要訪問ID,如$scope.model.id$scope.model2.id

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

 
app.controller('MyController', function MyController($scope, $filter) { 
 
$scope.model2 = ""; 
 
$scope.change = function(val){ 
 
\t $scope.model2 = $filter('filter')($scope.mapme, { text: val.text })[0]; 
 
} 
 
$scope.original=[{"id":"id1", "text":"volvo"}, {"id":"id2", "text":"toyota"}]; 
 
    $scope.mapme=[{"id":"id1", "text":"toyota"}, {"id":"id2", "text":"volvo"}]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller='MyController' ng-app='myApp'> 
 
original <select ng-model="model" ng-change="change(model)" ng-options="original as original.text for original in original" ></select> 
 

 
    {{model.id}} 
 

 
    <br> 
 
    mapme <select ng-model="model2" ng-options="map as map.text for map in mapme" ></select> {{model2.id}} 
 

 
</div> 
 
javascript angularjs 
 
shareeditflag 
 
edited 41 secs ago 
 

 
Lazar Ljubenović 
 
2,3331025 
 
asked 6 mins ago 
 

 
user3548161 
 
738 
 
add a comment 
 
Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook. 
 
Your Answer 
 

 

 
    
 

 
community wiki 
 
Post Your Answer 
 
Browse other questions tagged javascript angularjs or ask your own question. 
 

 
asked 
 

 
today 
 

 
viewed 
 

 
5 times 
 

 
FEATURED ON META 
 
Sunsetting Documentation 
 
Documentation is read-only. What’s next? 
 
HOT META POSTS 
 
26 I need some help improving one of my old questions 
 
4 Are the penalties for editing increased? 
 
Looking for a job? 
 
Senior Frontend Developer (Angular.js 1.x) 
 
RecordsureLondon, UK 
 
$18K - $30KREMOTE 
 

 
</div>

相關問題