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

Question

我正在尝试从 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-value 如下：

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

Answer 1

问题在于没有更新的 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);
         });
     });

工作小提琴：JSFiddle