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

时间:2017-02-01 07:03:30

标签: javascript angularjs

我试图访问下拉选项的选定值的值。但问题是我已经有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);
     }
})

2 个答案:

答案 0 :(得分:2)

如果你想在没有隔离范围的情况下重复隔离范围然后将变量绑定为对象而不是像这样的独立变量

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

并以

的形式访问它
 alert($scope.a.style);

请参阅小提琴https://jsfiddle.net/44a0thqt/1/

答案 1 :(得分:1)

两个下拉列表ng-model="style">都有相同的型号名称。这是一个问题

  

您应该为ng-model指令

提供配额名称

更新

也是select内的第一个ng-repeat标记,因此它会创建多个select标记。这次你应该传递索引并获取数据。

请将您的第一个drodown模型名称更改为ng-model="item.style">。所以现在您可以使用索引计数来获取值,如$scope.items[indexNumber].style

请参阅演示:https://jsfiddle.net/44a0thqt/3/