AngularJS 字符串 url 连接表单数据

Question

我正在尝试通过 concat 字符串方法将表单数据从联系表单发送到 Web 服务。我制作了一个如下所示的控制器：

// contact controller
eventApp.controller('contactController', ['$scope', '$http', function($scope, $http) {
    $scope.obj = {
        val1: 'personName',
        val2: 'email',
        val3: 'subject',
        val4: 'emailMessage'
    };
    $scope.sendMessage = function(obj) {
        var string = '#/path/' + $scope[obj.val1] + '/' + $scope[obj.val2] + '/' + $scope[obj.val3] + '/' + $scope[obj.val4];
        //$scope.debug.val = string;
        console.log(obj);
    };
}]);

如何填写“personName”、“email”、“subject”和“emailMessage”等值的输入值，例如“John”、“john@email.com”、“webservice”和“你好！'？我应该使用表达式吗？

在 DOM 控制台中，当我点击发送按钮时，我会得到这样的对象答案：

Object {val1: "personName", val2: "email", val3: "subject", val4: "emailMessage"}

我的 HTML 如下所示：

<!-- partial-contact.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
    <div id="form-container">
        <!-- Contact Heading -->
        <div class="page-header text-center">
            <h1><i class="fa fa-comment"></i> Kontakt</h1>
            <p>Ved spørsmål skriv ein epost i kontaktskjemaet under.</p>
        </div>
        <!-- Form -->
        <!-- use ng-submit to catch the form submission and use our Angular function -->
        <form id="contactForm" name="contactForm" novalidate ng-submit="contactForm()" ng-controller="contactController" method="post">
        <!-- Name -->
        <div class="input-group margin-bottom-sm">
            <span class="input-group-addon"><i class="fa fa-user"></i></span>
            <input id="personName" class="form-control" type="text" name="personName" ng-model="contactData.personName" placeholder="Namn *" required />
        </div>
        <!-- Email -->
        <div class="input-group margin-bottom-sm">
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input id="email" class="form-control" type="email" name="email" ng-model="contactData.email" placeholder="Epost *" required />
        </div>
        <!-- Subject -->
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-info"></i></span>
            <input id="subject" class="form-control" type="text" name="subject" ng-model="contactData.subject" placeholder="Emne *" required />
        </div>
        <!-- Email Message & Button -->
        <div class="input-group">
            <div class="input-group-btn">
                <!-- Email Message -->
                <textarea id="emailMessage" type="text" class="form-control" name="emailMessage" ng-model="contactData.emailMessage" ng-minlength=10 ng-maxlength=300 placeholder="Melding..." required></textarea>
                <!-- Button -->
                <button id="submit" type="submit" class="btn btn-primary" ng-click="sendMessage(obj)"><i class="fa fa-angle-double-right"></i></button>
            </div>
        </div>
        <br>
        </form>
    </div>
</div>
</div>

Answer 1

contactData 是您在控制器范围内保存数据的对象。

使用$scope.contactData[obj.val1] 而不是$scope[obj.val1]