AngularJS-未定义值单选按钮

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-item 范围。

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

使用命名控制器

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"。

演示

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
  }
});

<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>

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 先生