javascript - 无法使用 ng-model 'salutation' 设置未定义的属性 ="vm.client.salutation"

Question

我在为自定义指令分配默认值时遇到了一些麻烦:如果我这样做:vm.client= 'Dhr.'; 然后将 ng 模型更改为此 ng-model="vm.client" 它会起作用。但我想如果我使用 ng-model="vm.client.salutation" 它不起作用。知道为什么会这样吗？

<div ng-controller="AddClientController as vm">
    <form name="form_addClient" ng-submit="vm.add()">

    <div class="row">
        <!-- salutation -->
        <div class="col-md-4">

  <bootstrap-dropdown  ng-model="vm.client.salutation" data-placeholder="Aanhef" data-dropdown-data="servicesData.listOfServiceNames"></bootstrap-dropdown>

            </div>
        </div>

....

这是我的 Controller :

(function () {
    'use strict';

    angular
        .module('app')
        .controller('AddClientController', AddClientController);

    AddClientController.$inject = ['ClientService', '$location', '$scope' ];
    function AddClientController(ClientService, $location, $scope) {

        var vm = this;

        vm.add = add;

        $scope.form = {};

        vm.client.salutation = 'Dhr.';

        $scope.servicesData = {
            listOfServiceNames : [
                "Mevrouw",
                "Mw.",
                "Dhr.",
                "Dr.",
                "Heer"
            ]
        }

        function add() {
            console.log("add Client")
            vm.dataLoading = true;
            ClientService.Create(vm.client)

        }
    }

})();

Answer 1

试试这个:

vm.client = {};
vm.client.salutation = 'Dhr.';