CODEWITHSUNDEEP
javascriptangularjs
user3548161
user3548161

Reputation: 119

AngularJS map one select option to another

I have 2 select options that will be dynamically populated from different sources but for now i use static object for my example .
I want to map volvo with id1 in original scope to volvo with id2 in mapme scope.

so as soon as the page loads if similar field names exist they get mapped. so far it's just mapping id1 in original scope to id1 in mapme scope when selected.

any help on how to do the mapping in angular would be appreciated.

    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>

Upvotes: 0

Views: 337

Answers (1)

Naren Murali
Naren Murali

Reputation: 56763

How about two modal and an ng-change function will do the mappings but you need to access the IDs like $scope.model.id and $scope.model2.id

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"}];
});    
<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>

Upvotes: 2

Related Questions