javascript - 从AngularJS中嵌套的ng-repeat内的下拉选项中获取选定的值

Question

我正在尝试访问下拉选项的选定值。但问题是我已经将 ng-repeat 作为父 div，并且下拉菜单中的选项也使用了 ng-repeat。所以基本上它是嵌套的 ng-repeat。

所以我无法访问选定的值。

jsFiddle

<div ng-controller="csrClrt">
<div  ng:repeat="item in items track by $index">

  <md-list one class="md-accordion">
            <md-input-container>
                   <label>Face Style:</label>
                  <md-select ng-model="style">
                   <md-option ng-value="user.name" ng:repeat="user in styles">{{user.name}}</md-option>
                  </md-select>
          </md-input-container>  
   </md-list>
</div>
<div>
<input type="button" value="get selected value" ng-click="getvalue()"/>
</div>

                    <p>
                    if i ttry out of parent ng repeat
                    </p>
                     <md-input-container>
                   <label>Face Style:</label>
                  <md-select ng-model="style">
                   <md-option ng-value="user.name" ng:repeat="user in styles">{{user.name}}</md-option>
                  </md-select>
          </md-input-container>
                              <div>

<input type="button" value="get selected value" ng-click="getvalue()"/>
                              </div>

                                 </div>

AngularJS

angular.module('MyApp', ['ngMaterial'])
.controller('csrClrt', function ($scope) {
     $scope.items=["0"];
     stylesdata=[{name:"a"},{name:"b"},{name:"c"}];
     var style=[];
     for(var i=0;i<stylesdata.length;i++)
     {
       style.push({
        name:stylesdata[i].name
       })
     }
     $scope.styles=style;
     $scope.getvalue=function()
     {

       alert($scope.style);
     }
})

Answer 1

如果您想在没有隔离范围的情况下执行此操作，则重复隔离范围，然后将变量绑定(bind)为对象而不是像这样的独立变量

<md-select ng-model="a.style">

并以

的方式访问它

 alert($scope.a.style);

参见 fiddle https://jsfiddle.net/44a0thqt/1/