Question

我正在尝试使用ng-view渲染页面，因为我使用ng-repeat来渲染我的单选按钮和ng-model，而不是在控制器中更新我的值..

我的HTML

<div ng-repeat="role in Roles">
            <input type="radio" ng-model="Role"
             value="role" ng-value="role"
                name="Roles"
                id={{role}}>                
            <span>{{role}}</span>
        </div>

我的控制器

 console.log("Moving Forward--"+$scope.Role);

在控制台打印未定义..

Answer 1

您的代码可以正常使用，但是您可以在angular .module('demo', []) .controller('DefaultController', DefaultController); DefaultController.$inject = ['$scope']; function DefaultController($scope) { $scope.availableRoles = ['Admin', 'Manager', 'User']; $scope.logSelectedRole = logSelectedRole; function logSelectedRole() { console.clear(); console.log("Moving Forward -- " + $scope.selectedRole); } }上设置一个对象来设置您在用户作为单个数据源进行交互时获得的属性，当从不同的控制器/源更新时，这些属性将相同

正如您在下面的示例中所做的那样正常工作

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController">
    <div ng-repeat="role in availableRoles">
      <input type="radio" ng-model="$parent.selectedRole" value="role" ng-value="role" name="Roles" id="{{role}}"/>         <span style="display: inline-block; line-height: 28px;">{{role}}</span>
    </div>
    <button ng-click="logSelectedRole()">Log to console</button>
  </div>
</div>

＆＃13;

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.availableRoles = ['Admin', 'Manager', 'User'];
    vm.logSelectedRole = logSelectedRole;
    
    function logSelectedRole() {
      console.clear();
      console.log("Moving Forward -- " + vm.selectedRole);
    }
  }

＆＃13;

使用控制器别名的相同示例

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div ng-repeat="role in ctrl.availableRoles">
      <input type="radio" ng-model="ctrl.selectedRole" value="role" ng-value="role" name="Roles" id="{{role}}"/>         <span style="display: inline-block; line-height: 28px;">{{role}}</span>
    </div>
    <button ng-click="ctrl.logSelectedRole()">Log to console</button>
  </div>
</div>

＆＃13;

$scope

＆＃13;

检查this视频及以下示例，了解在$parent.something上创建对象时的差异，并在其上分配属性而不是直接分配。我建议您使用以下方法，而不是使用angular .module('demo', []) .controller('DefaultController', DefaultController); DefaultController.$inject = ['$scope']; function DefaultController($scope) { $scope.data = { selectedRole: undefined }; $scope.availableRoles = ['Admin', 'Manager', 'User']; $scope.logSelectedRole = logSelectedRole; function logSelectedRole() { console.clear(); console.log("Moving Forward -- " + $scope.data.selectedRole); } }或使用控制器别名语法。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController">
    <div ng-repeat="role in availableRoles">
      <input type="radio" ng-model="data.selectedRole" value="role" ng-value="role" name="Roles" id="{{role}}"/>         <span style="display: inline-block; line-height: 28px;">{{role}}</span>
    </div>
    <button ng-click="logSelectedRole()">Log to console</button>
  </div>
</div>

＆＃13;

<html>
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<body> 
<div id="centerplist">
</div>
<script>
$(document).ready(function()
{
$("#centerplist").prepend("<a class='action-button' id='pl65197buy' value='buy now' onclick='buy(this, 65197, null,\"pl65197qty\",null, \"/ajax/buy\")'>Bekijk aanbieding</a>");
});

function buy(p1,p2,p3,p4,p5,p6)
{
alert(p2);
}
</script>
</body> 
</html>

＆＃13;

Answer 2

<div ng-repeat="role in Roles">
            <input type="radio" data-ng-model="Role"
            data-ng-value="role"
            ng-change="Value()"
                name="Roles">               
            <span>{{role}}</span>
        </div>

在控制器中 $ scope.Value =函数（）{

                        console.log("Moving Forward--"+$scope.Role);                                                 
             }

工作正常......

使用ng-repeat＆amp;创建单选按钮时ng-view模型值未反映在控制器

2 个答案: