angularjsng-dialog

ng-dialog: input radio button value is undefined


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

Solution

  • 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