CODEWITHSUNDEEP
angularjs
Davan Polampalli
Davan Polampalli

Reputation: 219

Getting selected values

<div ng-repeat="x in y">
<md-select ng-model="sampleName" placeholder="Name">
    <md-option  ng-value="{{ opt.Name }}" ng-repeat="opt in sampleJson">
          {{ opt.Name }}
    </md-option>                     
  </md-select>
</div>

Need to get all the selected values of many generated select elements.

Upvotes: 0

Views: 40

Answers (2)

Snopzer
Snopzer

Reputation: 1692

Script

Remember Angular JS Changes value of the variable at every instance, means when you console the value, it shows the latest value it holds.

$scope.sampleName // Simiply go with this

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

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

app.controller('MainCtrl', function($scope) {
	
	$scope.options = [
	  {
	    name: 'Rome',
	    size: '200€',
	    image: 'http://lorempixel.com/120/60/cats/'
	  },
	  {
	    name: 'Naples',
	    size: '230€',
	    image: 'http://lorempixel.com/120/60/food/'
	  }
	  ];
	  
	  $scope.currOption = 	$scope.options[1];
	
	  $scope.updateData = function(){
	    $scope.options = [
    	  {
    	    name: 'London',
    	    size: '400€',
    	    image: 'http://lorempixel.com/60/60/abstract/'
    	  },
    	  {
    	    name: 'Paris',
    	    size: '900€',
    	    image: 'http://lorempixel.com/60/60/nature/'
    	  },
    	  {
    	    name: 'Rome',
    	    size: '200€',
    	    image: 'http://lorempixel.com/60/60/sport/'
    	  },
    	  {
    	    name: 'Naples',
    	    size: '230€',
    	    image: 'http://lorempixel.com/60/60'
    	  }
    	  ];
    	  
    	  $scope.currOption = 	$scope.options[1];
	  }
	
});
<!DOCTYPE html>
<html data-ng-app="DemoApp">

  <head>

    <!-- Angulars Material CSS using RawGit to load directly from `bower-material/master` -->
    <!--<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">-->
    <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/5d70169b6147dc15144d3f85a929a9ac3f429584/angular-material.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
        <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-aria.js"></script>

    <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
    <!--<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>-->
    <script src="https://rawgit.com/angular/bower-material/5d70169b6147dc15144d3f85a929a9ac3f429584/angular-material.js"></script>
    <script src="script.js"></script>
    <style>p { font-size: 0.75em; }</style>
  </head>
  <body data-ng-controller="MainCtrl">
    <h1>md-select demo</h1>
  	<!-- <select data-ng-model="currOption" data-ng-options="opt as opt.name for opt in options"></select> -->
  	<md-select data-ng-model="currOption">
  	  <md-select-label><img src="{{ currOption.image }}" /></md-select-label>
  		<md-option data-ng-value="opt" data-ng-repeat="opt in options"><img src="{{ opt.image }}" /></md-option>
  	</md-select>
  	</br></br></br>
  	{{currOption}}
  	
  	<md-button ng-click="updateData()">Change data</md-button>
  </body>
</html>

Upvotes: 1

Related Questions