AngularJS将一个选择选项映射到另一个选项

时间:2017-08-27 12:31:41

标签: javascript angularjs

我有2个选择选项,将从不同的源动态填充,但现在我使用静态对象作为我的例子 我想将原始范围内id1的volvo映射到mapme范围内id2的volvo。

一旦页面加载,如果存在类似的字段名称,它们就会被映射。 到目前为止,它只是将原始范围内的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>

1 个答案:

答案 0 :(得分:2)

两个模态和ng-change函数如何进行映射,但您需要访问$scope.model.id$scope.model2.id

等ID

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

app.controller('MyController', function MyController($scope, $filter) {
$scope.model2 = "";
$scope.change = function(val){
	$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"}];
});    
&#13;
<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>
&#13;
&#13;
&#13;