获得ng-repeat创建的输入值

时间:2016-09-22 11:25:31

标签: angularjs radio-button angularjs-ng-repeat

我创建了一个radiobutton输入,但很难获得所选输入的值。

这是我创建的radiobuttons输入

<ul ng-repeat="item in riskModel">
    <li>
      <input type="radio" name="rdbRisk" ng-value="{{item.value}}" />
      {{item.text}}
    </li>
</ul>

这是控制器中的ng-model定义

$scope.riskModel = [
        { id: 0, text: "A", value: "" },
        { id: 1, text: "B Risk", value: "YR" },
        { id: 2, text: "C Risk", value: "OR" },
        {id:3,text:"D Risk",value:"DR"}
    ]

我想获取所选值并将其作为参数发送给函数,但到目前为止我没有得到任何结果。

4 个答案:

答案 0 :(得分:1)

不要在输入中使用表达式{{}}

<input type="radio" name="rdbRisk" ng-value="item.value" />

DEMO

最佳选择是使用ng-model并获取所选值

  <input type="radio" ng-model="selected" name="rdbRisk"     ng-click="display(selected)" />

DEMO

答案 1 :(得分:1)

您忘记了ng-model

<input type="radio" ng-model="selectedValue" name="rdbRisk" ng-value="item.value" />

使用$scope.selectedValue

访问控制器

答案 2 :(得分:1)

显示your working example的小提琴:

input上,添加ng-model您要保存所选内容的位置,然后删除{{}}上的{{item.value}}周围的内容。

<li>
  <input type="radio" 
        ng-model="mySelection.selected" 
        name="rdbRisk"
        ng-value="item.value" />
  {{item.text}}
</li>

答案 3 :(得分:1)

将您的ng-model变量声明为对象$scope.radioModel = {};

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  //$scope.radioModel = {};
  $scope.riskModel = [
        { id: 0, text: "A", value: "" },
        { id: 1, text: "B Risk", value: "YR" },
        { id: 2, text: "C Risk", value: "OR" },
        {id:3,text:"D Risk",value:"DR"}
    ]
  $scope.changeValue = function(value){
    console.log(value.selected);
  }
  
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="GreetingController" ng-init="radioModel={}">
    Get selected value : {{radioModel.selected}}
  <ul ng-repeat="item in riskModel">
    <li>
      <input type="radio" ng-model="radioModel.selected" name="rdbRisk" ng-value="item.value" ng-change="changeValue(radioModel)"/>
      {{item.text}}
    </li>
</ul>
</div>
</body>