Question

我在使用angularJS检索单选按钮的值时遇到问题。

我已经完成了以单选按钮形式显示用户角色，以便将管理员选择的每个角色的IdRole发送到angularJS函数，如下所示：

html代码

<div class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
  <label for="exampleInputEmail1">Role of User*:</label>  
  <div class="radio radio-info radio-inline" ng-repeat="roles in ListRolesUsers">
    <input type="radio" id="inlineRadio1" name="roleUser" ng-model="roleUser" value="{{roles.idRole}}">
    <label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
  </div>

AngularJS

var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
  $scope.AddUsers = function() {
    console.log("id role of user: "+$scope.roleUser); // id role of user: undefined
  }
}

测试后总是 idRole未定义我不知道为什么。

角色列表显示在浏览器中：

Role of User*:

    1 // Admin

    2 // SuperUsers

    3 // SimpleUsers

ListRolesUsers 的

格式：

[{"idRole":1,"nomRole":"Admin","authority":"Admin"},
{"idRole":2,"nomRole":"SuperUsers","authority":"SuperUsers"},{"idRole":3,"nomRole":"SimpleUsers","authority":"SimpleUsers"}]

从数据库中检索角色列表

如何确保单选按钮的值？

Answer 1

您似乎有一个经典的范围问题。您的ngRepeat正在为每个项目创建一个新范围。而且，当你像你一样设置ngModel时，你会将它影响到你的ngRepeat项目范围。

为避免这种情况，有两种解决方案：

使用命名控制器

<强> HTML

<div ng-controller="Users as $ctrl" class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
  <label for="exampleInputEmail1">Role of User*:</label>  
  <div class="radio radio-info radio-inline" ng-repeat="roles in $ctrl.ListRolesUsers">
    <input type="radio" id="inlineRadio1" name="roleUser" ng-model="$ctrl.roleUser" ng-value="roles.idRole">
    <label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
  </div>
</div>

<强> JS

var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
  var vm = this;

  $scope.AddUsers = function() {
    console.log("id role of user: "+vm.roleUser); // id role of user: undefined
  }
}

使用ngModel中的对象

<强> HTML

<div class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
  <label for="exampleInputEmail1">Role of User*:</label>  
  <div class="radio radio-info radio-inline" ng-repeat="roles in ListRolesUsers">
    <input type="radio" id="inlineRadio1" name="roleUser" ng-model="userSelection.roleUser" ng-value="roles.idRole">
    <label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
  </div>
</div>

<强> JS

var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
  $scope.userSelection = {};
  $scope.AddUsers = function() {
    console.log("id role of user: "+$scope.userSelection.roleUser); // id role of user: undefined
  }
}

最好的方法显然是第一种，使用命名控制器。

Answer 2

ng-repeat创建子范围，因此您必须绑定到$parent。

试试这个ng-model="$parent.roleUser"而不是ng-model="roleUser"。

<强>样本

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.ListRolesUsers = [{"idRole":1,"nomRole":"Admin","authority":"Admin"},
{"idRole":2,"nomRole":"SuperUsers","authority":"SuperUsers"},{"idRole":3,"nomRole":"SimpleUsers","authority":"SimpleUsers"}];

$scope.AddUsers = function() {
    console.log("id role of user: "+$scope.roleUser); // id role of user: undefined
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="form-group">
  <label for="exampleInputEmail1">Role of User*:</label>  
  <div class="radio radio-info radio-inline" ng-repeat="roles in ListRolesUsers">
    <input type="radio" id="inlineRadio{{$index}}" name="roleUser" ng-model="$parent.roleUser" value="{{roles.idRole}}" ng-click="AddUsers()">
    <label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
  </div>
</div>

＆＃13;

Answer 3

我通过这段代码解决了这个问题：

<强> HTML

<div class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
  <label for="exampleInputEmail1">Role of User*:</label>  
  <div class="radio radio-info radio-inline" ng-repeat="roles in ListRolesUsers">
    <input type="radio" id="inlineRadio1" name="roleUser" ng-model="userSelection.roleUser" ng-value="roles.idRole">
    <label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
  </div>
</div>

<强> JS

var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
  var vm = this;

  $scope.AddUsers = function() {
    console.log("id role of user: "+vm.roleUser); // id role of user: undefined
  }
}

感谢先生@Julien TASSIN和@Rohit Jindal

AngularJS-undefined值单选按钮

3 个答案:

使用命名控制器

使用ngModel中的对象