AngularJS：单选按钮选择的值在控制器中返回未定义答案

【问题标题】：AngularJS: Radio button selected values are returning undefined in controllerAngularJS：单选按钮选择的值在控制器中返回未定义
【发布时间】：2019-06-29 10:05:45
【问题描述】：

我创建了 ng-repeat 指令来提供单选按钮列表，并尝试访问控制器中用户选择的值，但我的值未定义。这是servicenow平台的代码，请告诉我有什么问题。

<div>
    <!-- your widget template -->
    <div class= "panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title" align="center">
                Select the options below to make a request:
            </h3>
        </div>
        <body>
            <div class="btn-group btn-group-justified">
                <div ng-repeat="item in data.items">
                    <input type="radio" 
                           name="item" 
                           data-ng-model="$parent.item" 
                           ng-checked="$first" 
                           id="{{::item.name}}" 
                           ng-value="{{::item.sys_id}}">
                    <label class="form-check-label" align="center">
                        <h5> {{::item.name}}</h5>
                    </label>
                </div>
                <div>
                    <input type="radio" 
                           name="select-service" 
                           ng-model="result" 
                           id="service3" 
                           ng-value="'Other'">
                    <label class="form-check-label" align="center">
                        <h5> OTHER</h5>
                    </label>
                </div>
            </div>
            <div ng-if="result=='Other'" class="md-block" style="width: 600px">
                <span>Select the item that you are interested</span>
                <sn-record-picker id="item1" 
                                  field="location" 
                                  table="'u_sc_cat_item_ext'" 
                                  display-fields="'name,sc_catalogs'" 
                                  value-field="'sys_id'" 
                                  search-fields="'name'" 
                                  default-query="data.queryString">
                </sn-record-picker>
            </div>
            <br>
            <br>
            <button type="button" 
                    class="btn btn-primary btn-lg" 
                    id="proceed1"
                    ng-click="RequestService()">Proceed</button>
        </body>
    </div>
</div>

控制器：

function ($scope, 
          $element, 
          $window, 
          $location,
          $rootScope, 
          $timeout, 
          snAttachmentHandler, 
          $http, 
          spUtil, 
          userPreferences, 
          $filter, 
          i18n, 
          $uibModal) {
    /* widget controller */
    var c = this;
    $scope.RequestService = function() {    
        $scope.data.action = $scope.item;-->>getting undefined value
        c.data.item1 = $('#item1').select2('val');
        $scope.server.update().then(function() {
            $scope.data.action = undefined;
            $scope.data.message = "";
            if ($scope.result == undefined) {
                $window.alert("RadioButton not checked.");
                //window.location.href='?id=hhs_request_page';
            }
            else {
                window.location.href = $scope.data.href;
            }
        });
    };
}

【问题讨论】：

$parent 的使用是code smell，这是更深层次问题的征兆。

标签： angularjs

【解决方案1】：

我认为这条线data-ng-model="$parent.item" 您正在访问父项（可能未定义）。

请重新检查。

【讨论】：

由于 ng-repeat 指令创建了自己的作用域，我不得不使用 $parent。

【解决方案2】：

由于正在使用$parent，您可以通过使用更新相应变量的方法来消除ng-if 和ng-repeat 创建的新范围的担忧，请查看我的以下示例并让我知道这是否修复你的问题！

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.selected = '';
  $scope.data = {
    items: [{
        'name': 'test',
        'sys_id': 1,
      },
      {
        'name': 'test2',
        'sys_id': 2,
      }

    ]
  }
  $scope.update = function(val) {
    $scope.selected = val;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div>
    <!-- your widget template -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title" align="center">
          Select the options below to make a request:
        </h3>
      </div>

      <body>
        <div class="btn-group btn-group-justified">
          <div ng-repeat="item in data.items">
            <input type="radio" name="item" ng-checked="$first" id="{{::item.name}}" ng-click="update(item.sys_id)">
            <label class="form-check-label" align="center">
                        <h5> {{::item.name}}</h5>
                    </label>
          </div>
          <div>
            <input type="radio" name="select-service" ng-model="result" id="service3" ng-value="'Other'">
            <label class="form-check-label" align="center">
                        <h5> OTHER</h5>
                    </label>
          </div>
        </div>
        <div ng-if="result=='Other'" class="md-block" style="width: 600px">
          <span>Select the item that you are interested</span>
          <sn-record-picker id="item1" field="location" table="'u_sc_cat_item_ext'" display-fields="'name,sc_catalogs'" value-field="'sys_id'" search-fields="'name'" default-query="data.queryString">
          </sn-record-picker>
        </div>
        <br>
        <br>
        <button type="button" class="btn btn-primary btn-lg" id="proceed1" ng-click="RequestService()">Proceed</button>
      </body>
    </div>
  </div>
  {{data.items}}<br> {{selected}}
</div>

【讨论】：