2016-09-21 2 views
0

私は私が私のラジオボタンとNGをレンダリングするためにNGリピートを使用していますように、NG-ビューを使用してページをレンダリングしようとしていますコントローラには、私の値を更新していないが存在する-model ..未定義の印刷コンソール上コントローラに反映取得されていないNGリピート&NG-ビューモデルの値を使用して、ラジオボタンを作成中

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

MY CONTROLLER

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

..

答えて

0

あなたのコードでは、しかし、あなたは、ユーザーが異なるコントローラ/ソースから更新されたときと同じになり、単一のデータソースとして対話するときに取得あなたのプロパティを設定する$scope上のオブジェクトを設定することができ、私のために正常に動作します。エイリアシングあなたは、コントローラを使用して例の下

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

同じ例をご確認ください方法のような

作品罰金

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

$scopeにオブジェクトを作成し、直接割り当てるのではなくそのプロパティを割り当てた場合の違いについては、ビデオを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); 
 
    } 
 
    }
<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>

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

は...

微細加工します
関連する問題