ng-dialog:输入单选按钮值未定义

ng-dialog: input radio button value is undefined

我正在尝试从 ng-dialog 获取单选按钮值,但它总是未定义。

这是对话框模板:

<script type="text/ng-template" id="flag-reasons.html">
    <div style="padding:10px;">
        <span>
            What's wrong ?
        </span>
        <div class="form-group" ng-repeat="flagreason in flagreasons">
            <input type="radio" ng-model="fr" name="frname" value="{{flagreason.id}}"> {{flagreason.title}}
        </div>
        <div class="form-group">
            <button type="button" ng-click="validFlag()">
                Valider
            </button>
        </div>
    </div>
</script>

这是我从对话框开始的部分 js:

$scope.openFlag = function(){
    $scope.dialog = ngDialog.open({ template: 'flag-reasons.html', 
      className: 'ngdialog-theme-default', scope: $scope });
    $scope.validFlag = function(){
        console.log($scope.fr);
    }
}

我试过如下 ng 值:

<input type="radio" ng-model="fr" name="frname" ng-value="flagreason.id"> {{flagreason.title}}

但它仍然未定义

请注意,当我直接设置单选按钮的值时它会起作用,例如:

<input type="radio" ng-model="fr" name="frname" value="5"> {{flagreason.title}}

问题出在未获得更新的 ngmodel 上。您必须先在模板中初始化 ngmodel。

flag-reasons.html

<script type="text/ng-template" id="flag-reasons.html">
    <div style="padding:10px;">
        <span>
            What's wrong ?
        </span>
        <div class="form-group" ng-repeat="flagreason in flagreasons">
            <input type="radio" ng-model="cb.fr" name="frname" value="{{flagreason.id}}">{{flagreason.id}} - {{flagreason.title}}
        </div>
        <div class="form-group">
            <button type="button" ng-click="validFlag()">
                Valider
            </button>
        </div>
    </div>
</script>

控制器

angular.module("app", ['ngDialog'])
     .controller('Ctrl',function ($scope, ngDialog) {
        'use strict';
        $scope.cb = {};
         $scope.flagreasons = [
            {id: 1, title: 'title1'},
            {id: 2, title: 'title2'},
            {id: 3, title: 'title3'}
         ];

         $scope.openFlag = function(){
          $scope.dialog = ngDialog.open({ template: 'flag-reasons.html', 
              className: 'ngdialog-theme-default', scope: $scope });
            $scope.validFlag = function(){
                console.log($scope.fr);
            }
        }

         $scope.$watch('cb.fr', function (v) {
         console.log(v);
         });
     });

工作Fiddle:JSFiddle