Question

我有一个典型的联系表单，我用AngularJS将值连接到预览div。如果填写了所有字段，这可以正常工作。我想将它移动到一个控制器中，以便我可以有条件地添加一些静态文本，例如只有在填写这些字段时才在电话和传真之间添加斜杠。我找不到任何超出连接值的示例代码。

        <div class="col-md-offset-1">
            <div class="form-group">
                <label class="control-label col-sm-2" for="companyFirm">Company/Firm</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="companyFirm" class="form-control" placeholder="Enter your company or firm name" required>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="contact">Contact</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="contact" class="form-control" placeholder="Enter the full name of the listing contact">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="address">Address</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="address" class="form-control" placeholder="Enter your street address">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="city">City</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="city" class="form-control" placeholder="Enter your city">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="state">State</label>
                <div class="col-sm-4">
                    <input type="text" ng-model="state" class="form-control" placeholder="Enter your state">
                </div>
            <!-- </div>
            <div class="form-group"> -->
                <label class="control-label col-sm-2" for="phone">Phone</label>
                <div class="col-sm-4">
                    <input type="phone" ng-model="phone" ng-change="getPhoneFax()" class="form-control" placeholder="Enter your phone number">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="zipcode">Zip&nbsp;Code</label>
                <div class="col-sm-4">
                    <input type="text" ng-model="zipcode" class="form-control" placeholder="Enter your Zip Code">
                </div>
            <!-- </div>
            <div class="form-group"> -->
                <label class="control-label col-sm-2" for="fax">Fax</label>
                <div class="col-sm-4">
                    <input type="phone" ng-model="fax" class="form-control" placeholder="Enter your fax number">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="email">Email</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="email" class="form-control" placeholder="Enter your email address">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="website">Website</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="website" class="form-control" placeholder="Enter your website address">
                </div>
            </div>
        </div>

        <h4>60-word Description</h4>
        <div class="col-md-offset-1">
            <div class="form-group">
                <label class="control-label col-sm-2" for="description"></label>
                <div class="col-sm-10">
                    <div>You have used <span class="wordCount">{{description|wordCounter}}</span> of your allowed 60 words.</div>
                    <textarea ng-model="description" class="form-control" rows="4" required></textarea>
                    <span class="help-block">Your 60 word, plain text only description begins after the listing header. You will receive a proof for approval prior to publication.</span>
                </div>
            </div>

            <div class="col-md-offset-3 col-sm-6" style="background:#ddd; padding:15px; margin-top:50px;">
                <strong>Live preview of listing</strong>
                <div style="background:#fff; border:5px solid #eee; padding:15px; line-height:1em;">
                    <strong><span class="text-uppercase" style="font-size:1.3em;" ng-show="companyFirm">{{companyFirm}}<br /></span>
                    <span ng-show="contact">{{contact}}<br /></span></strong>
                    <span style="font-weight:500;">
                        <span ng-show="address">{{address}}<br /></span>
                        <span ng-show="city">{{city}}, </span><span ng-show="state" class="text-uppercase">{{state}}</span>  <span ng-show="zipcode">{{zipcode}}</span><br />
                        <span ng-show="phone">{{phone}} / </span><span ng-show="fax">Fax: {{fax}}<br /></span>
                        <span ng-show="email">{{email}}<br /></span>
                        <span ng-show="website">{{website}}<br /></span>
                    </span>
                    <span style="color:#787878;">{{description}}</span>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

http://plnkr.co/edit/1oqneNRXuTXhiqE7vKWw?p=catalogue

Answer 1

如果我正确理解问题，在控制器中你可以使用标准的js连接：

$scope.phoneFax = function() {
    //You can also save result in variable; 
    return ($scope.phone ? $scope.phone : '')
    + ($scope.phone && $scope.fax ? ' / ' : '') 
    + ($scope.fax ? 'Fax: ' + $scope.fax : '');
};

模板：

<span>{{phoneFax()}}</span>

您也可以直接在模板中进行制作：

<span ng-show="phone">{{phone}}</span>
<span ng-show="fax && phone"> / </span>
<span ng-show="fax">Fax: {{fax}}<br /></span>

在控制器中连接表单值

1 个答案: