Question

我有以下AngularJS代码：

    angular.module('loggedInApp', ['ui.bootstrap']);

    var myapp = angular.module('loggedInApp', ['ui.bootstrap'])
    myapp.controller('AddParentController', function ($scope, addParentService) {
        var vm = this;

        $scope.addParentService = addParentService;
        $scope.setName = function (val) {
            addParentService.inputParentName = val;
        }

        $scope.setEmail = function (val) {
            addParentService.inputParentEmail = val;
        }

        $scope.setCarrier = function (val) {
            addParentService.inputParentCarrier = val;
        }
        $scope.setBirthday = function (val) {
            addParentService.inputParentBirthday = val;
        }
    });

myapp.service('addParentService', function () {
    var vm = this;

    vm.eventObjs = [];

    vm.parent = [];

    vm.addParent = function () {
        alert(vm.inputParentName);
        alert(vm.inputParentBirthday);
        alert(vm.inputParentEmail);
        alert(vm.inputParentCellPhone);
        alert(vm.inputParentCarrier);


        vm.parent.push({
            name: vm.inputParentName, dob: vm.inputParentBirthday,
            cell: vm.inputParentCellPhone, carrier: vm.inputParentCarrier,
            email: vm.inputParentEmail, active: true, personId: vm.parent.length + 1
        });

        vm.inputParentName = '';
        vm.inputParentDOB = '';
        vm.inputParentCellPhone = '';
        vm.inputParentCarrier = 0;
        vm.inputParentEmail = '';
        vm.active = true;
    };

    vm.buildEventObject = function (titleValue, startValue, personId, choreIdValue) {
        vm.eventObjs.push({ title: titleValue, start: startValue, familymemberpersonid: personId, choreId: choreIdValue });
        return vm.eventObjs;
    }
    vm.returnEventObject = function () {
        return vm.eventObjs;
    }
});

我的HTML看起来像这样：

            <div class="row clearfix" ng-controller="AddParentController as parent">
                <div class="col-md-6 column">
                    <form role="form" ng-submit="addParentService.addParent()">
                        <div class="form-group">
                            <label for="inputParentName">Name</label><input class="form-control" id="inputParentName" value="" type="text" ng-model="addParentService.inputParentName" />
                        </div>
                        <div class="form-group">
                            <label for="inputParentBirthday">Birthday</label><input class="form-control" id="inputParentBirthday" value="" type="text" ng-model="addParentService.inputParentBirthday" />
                        </div>
                        <div class="form-group">
                            <label for="inputParentCellPhone">Cell Phone</label><input class="form-control" id="inputParentCellPhone" value="" type="text" ng-model="addParentService.inputParentCellPhone" />
                        </div>
                        <div class="form-group">
                            <label for="inputParentCarrier">Phone Carrier</label><br />
                            <select class="form-control" id="inputParentCarrier">
                                <option>ATT</option>
                                <option>Cricket</option>
                                <option>Sprint</option>
                                <option>T-Mobile</option>
                                <option>Verizon</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="inputParentEmail">E-Mail Address</label><input class="form-control" id="inputParentEmail" value="" type="email" ng-model="addParentService.inputParentEmail" />
                        </div>
                        <button class="btn btn-default" type="submit">Submit</button>
                    </form>
                </div>
                <br /><br />
                <div class="col-md-6 column">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                Parent:
                            </h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <tr>
                                    <th>Name</th>
                                    <th>Cell #</th>
                                    <th>E-Mail</th>
                                    <th>DOB</th>
                                </tr>
                                <tr ng-repeat="parent in addParentService.parent">
                                    <td>{{parent.name}}</td>
                                    <td>{{parent.cell}}</td>
                                    <td>{{parent.email}}</td>
                                    <td>{{parent.dob}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="panel-footer">
                            <button class="btn btn-default" type="submit">Save your Family!</button>
                        </div>
                    </div>
                </div>
            </div>

我的问题是当我点击提交按钮时，我正在调用我的服务，提醒我输入的所有不同值。除 inputParentCarrier 值外，一切正常。当它发出警告时说“未定义”

似乎这应该是一个简单的修复，但现在我看不出有什么问题。

Answer 1

您需要在选择标记中添加ng-model =“addParentService.inputParentCarrier”

Answer 2

您还需要为select元素添加model，例如：

<select ng-model="addParentService.inputParentCarrier" class="form-control" id="inputParentCarrier">
    <option>ATT</option>
    <option>Cricket</option>
    <option>Sprint</option>
    <option>T-Mobile</option>
    <option>Verizon</option>
</select>

Answer 3

您应该将ng-model绑定到select而不是标签。

<select class="form-control" id="inputParentCarrier" ng-model="addParentService.inputParentCarrier">
    <option>ATT</option>
    <option>Cricket</option>
    <option>Sprint</option>
    <option>T-Mobile</option>
    <option>Verizon</option>
</select>

Answer 4

将您的选择标记更改为：

<select class="form-control" id="inputCarrier" ng-model="myService.inputParentCarrier">
    <option value="att">ATT</option>
    ....
    <select>

Answer 5

您的选择

上缺少ng-model

<select class="form-control" id="inputParentCarrier" ng-model="addParentService.inputParentCarrier">
  <option>ATT</option>
  <option>Cricket</option>
  <option>Sprint</option>
  <option>T-Mobile</option>
  <option>Verizon</option>
</select>

使用Angularjs时无法获得选项值

5 个答案: