Question

我试图弄清楚如何在不使用JQuery的情况下解决这个问题，所以任何帮助都会受到赞赏。

基本上我正在调用一个在屏幕上显示客户数据的休息服务。数据库有4个返回的地址行。第一个地址行是必填字段，但其余地址是可选的。

使用ng-show我设法只显示在页面加载时有数据的地址行，但是我想在每行末尾使用bootstrap加号来强制显示下一个地址行是否显示空白。这样，如果用户需要添加到他或她可以的地址。

最好的方法是什么？到目前为止，这是我的代码：

<input type="text" class="form-control" name="AddressLine1" placeholder ="Address Line" ng-model="order.joAddressLine1" required />
<input type="text" class="form-control" name="AddressLine2" placeholder ="Address Line" ng-model="order.joAddressLine2" ng-show="order.joAddressLine2" />
<input type="text" class="form-control" name="AddressLine3" placeholder ="Address Line" ng-model="order.joAddressLine3" ng-show="order.joAddressLine3" />
<input type="text" class="form-control" name="AddressLine4" placeholder ="Address Line" ng-model="order.joAddressLine4" ng-show="order.joAddressLine4" />
<input type="text" class="form-control" name="City" placeholder ="City" ng-model="order.joCity" required />

Answer 1

检查这个小提琴：https://jsfiddle.net/118bfzfp/

HTML

<div ng-app="test" ng-controller="Ctrl">
    <input type="text" class="form-control" name="AddressLine1" placeholder ="Address Line" ng-model="order.joAddressLine1" required />
    <input type="text" class="form-control" name="AddressLine2" placeholder ="Address Line" ng-model="order.joAddressLine2" ng-show="order.joAddressLine2 || show2" />
    <input type="text" class="form-control" name="AddressLine3" placeholder ="Address Line" ng-model="order.joAddressLine3" ng-show="order.joAddressLine3 || show3" />
    <input type="text" class="form-control" name="AddressLine4" placeholder ="Address Line" ng-model="order.joAddressLine4" ng-show="order.joAddressLine4 || show4" />
    <button ng-click="add()">+</button>
    <input type="text" class="form-control" name="City" placeholder ="City" ng-model="order.joCity" required />
</div>

控制器

angular.module('test',[]).controller('Ctrl', function ($scope) {
    $scope.order = {
        joAddressLine1: 'sample'
    };

    $scope.add = function () {
        $scope.show2 = true;
        $scope.show3 = $scope.order.joAddressLine2;
        $scope.show4 = $scope.order.joAddressLine3;
    }    
});

如何切换ng-show以显示隐藏的字段？

1 个答案: