AngularJS字符串url concat表单数据

时间:2014-11-26 13:43:31

标签: angularjs expression string-concatenation

我正在尝试通过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>

1 个答案:

答案 0 :(得分:0)

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

使用$scope.contactData[obj.val1]代替$scope[obj.val1]