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

时间:2017-01-15 06:12:31

标签: angularjs ng-dialog

我正在尝试从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}}

1 个答案:

答案 0 :(得分:1)

问题在于ngmodel没有得到更新。您必须先在模板中初始化ngmodel。

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