Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="starter">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-controller="MyCtrl">
 <div> Map Type<select ng-model="Map.TypeSel" ng-options="item as item.Name for item in Map.Types track by item.Id" ng-init="Map.TypeSel=Map.Types[0]"></select></div>
 <div>Commodity<select ng-model="Map.MapSel" ng-options="item as item.Metal for item in Map.Cord[Map.TypeSel.Code] track by item.Metal" ng-init="Map.MapSel=Map.Cord[Map.TypeSel.Code][0]" ng-change="loadMap(Map.MapSel)"></div>
  </div>
</body>
</html>
 
var app=angular.module('starter', []);
​
app.controller('MyCtrl', function ($scope) {
    $scope.Map = [];
    $scope.Map.Cord = [];
    
    $scope.Map.Types = [{ Name: "Geology", Id: 0, Code: "Geo" }, { Name: "Metallic", Id: 1, Code: "Met" }, { Name: "Non Metallic", Id: 2, Code: "Non" }, { Name: "Rare Earth", Id: 3, Code: "Ear" }, { Name: "Metallic & Non Metallic", Id: 4, Code: "MNe" }];
    $scope.Map.Cord.Geo = [{ "Metal": "Geology Of Oman", "Dim": "2481,3509", "Path": "img/M/GEOLOGY_OF_OMAN.jpg" }];
    $scope.Map.Cord.Met = [{ "Metal": "CHROMITE", "Dim": "2481,3509", "Path": "img/M/Metallic/CHROMITE(M).jpg" }, { "Metal": "COPPER", "Dim": "2481,3509","Path":"img/M/Metallic/COPPER(M).jpg" }, { "Metal": "GOLD", "Dim": "2481,3509","Path":"img/M/Metallic/GOLD(M).jpg" }, { "Metal": "IRON", "Dim": "2481,3509","Path":"img/M/Metallic/IRON(M).jpg" }];
    $scope.Map.Cord.Non = [{ "Metal": "ASBESTOS", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ASBESTOS(NM).jpg" }, { "Metal": "BARITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/BARITE(NM).jpg" }, { "Metal": "CLAY", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/CLAY(NM).jpg" }, { "Metal": "GYPSUM", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/GYPSUM(NM).jpg" }, { "Metal": "KAOLIN", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/KAOLIN(NM).jpg" }, { "Metal": "LATERITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LATERITE(NM).jpg" }, { "Metal": "LEAD", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LEAD(NM).jpg" }, { "Metal": "LIMESTONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LIMESTONE(NM).jpg" }, { "Metal": "ORNAMENTAL STONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ORNAMENTAL_STONE(NM).jpg" }, { "Metal": "PHOSPHATE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PHOSPHATE(NM).jpg" }, { "Metal": "PYRITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PYRITE(NM).jpg" }, { "Metal": "SILICA", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/SILICA(NM).jpg" }];
    $scope.Map.Cord.Ear = [{ "Metal": "STRONTIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/STRONTIUM(RE).jpg" }, { "Metal": "URANIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/URANIUM(RE).jpg" }];
    $scope.Map.Cord.MNe = [{ "Metal": "Metalic & Non Metalic", "Dim": "2481,3509", "Path": "img/M/M&NM.jpg" }];
​
    $scope.loadMap = function (MapSel) {        
            console.log($scope.Map.MapSel);
       
    }
​
});
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers