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

Question

I'm trying to get the radio value button value from ng-dialog but it always got undefined.

Here is the dialog template:

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

Here is the partial js where I start with the dialog:

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

I have tried ng-value as below:

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

but it still got undefined

Notice that it works when I directly set the value of the radio button like:

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

Answer 1

The issue is with ngmodel that's not getting update. You have to initialise ngmodel first in the template.

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>

Controller

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

Working Fiddle: JSFiddle