<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>
生成された多くの選択要素の選択値をすべて取得する必要があります。選択値の取得
var app = angular.module('DemoApp', ['ngMaterial']);
app.controller('MainCtrl', function($scope) {
\t
\t $scope.options = [
\t {
\t name: 'Rome',
\t size: '200€',
\t image: 'http://lorempixel.com/120/60/cats/'
\t },
\t {
\t name: 'Naples',
\t size: '230€',
\t image: 'http://lorempixel.com/120/60/food/'
\t }
\t ];
\t
\t $scope.currOption = \t $scope.options[1];
\t
\t $scope.updateData = function(){
\t $scope.options = [
\t {
\t name: 'London',
\t size: '400€',
\t image: 'http://lorempixel.com/60/60/abstract/'
\t },
\t {
\t name: 'Paris',
\t size: '900€',
\t image: 'http://lorempixel.com/60/60/nature/'
\t },
\t {
\t name: 'Rome',
\t size: '200€',
\t image: 'http://lorempixel.com/60/60/sport/'
\t },
\t {
\t name: 'Naples',
\t size: '230€',
\t image: 'http://lorempixel.com/60/60'
\t }
\t ];
\t
\t $scope.currOption = \t $scope.options[1];
\t }
\t
});<!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>
\t <!-- <select data-ng-model="currOption" data-ng-options="opt as opt.name for opt in options"></select> -->
\t <md-select data-ng-model="currOption">
\t <md-select-label><img src="{{ currOption.image }}" /></md-select-label>
\t \t <md-option data-ng-value="opt" data-ng-repeat="opt in options"><img src="{{ opt.image }}" /></md-option>
\t </md-select>
\t </br></br></br>
\t {{currOption}}
\t
\t <md-button ng-click="updateData()">Change data</md-button>
</body>
</html>スクリプト
すべてのインスタンスでの変数の角度JSの変更値を覚えて、あなたが値を慰めるとき、それが保持している最新の値を示していることを意味します。
$scope.sampleName // Simiply go with this
フラグをクリックしてオプションをクリック/解除すると、フラグがtrueに設定されます –