如果所有模型值都不为空，则显示角度

angular if all model values are not null show

本文关键字：显示 模型 如果      更新时间：2023-09-26

我试图根据表单中输入的每个值或勾选的框来显示文本。

我似乎不知道如何让它适用于所有的输入字段。

有什么想法吗？

<div class="container" ng-app ng-controller="OrderFormController">
    <div class="row form-group">
        <div class="well">
            <label for="description" class="col-sm-3 control-label">Extinguisher Status</label>
            <div ng-if="myForm.inputs != null">show something</div>
            <div class="input-group"></div>
        </div>
    </div>
    <form name="myForm">
        <div class="row form-group" ng-repeat="input in inputs">
            <div class="well">
                <label for="description" class="col-sm-3 control-label">{{input.name}}</label>
                <div class="input-group">
                    <input type="text" class="form-control" required placeholder="Enter {{input.name}}" ng-model="entered">
                    <!-- <span type="button" class="glyphicon glyphicon-ok" ng-if="input.name==' Geo Location:'"></span> -->
                    <span ng-class="{'input-group-addon danger' : !entered, 'input-group-addon success': entered}" ng-init="isActive = false">
              <span ng-class="{'glyphicon glyphicon-remove': !entered, 'glyphicon glyphicon-ok': entered}" ng-init="isActive = false">
              </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="row form-group" ng-repeat="check in checks">
            <div class="well">
                <label for="description" class="col-sm-3 control-label">{{check.name}}</label>
                <div class="btn-group" data-toggle="buttons">
                    <label ng-class="{'btn btn-danger': !isActive, 'btn btn-success': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
                        <input type="checkbox" autocomplete="off" required ng-model="entered"> <span ng-class="{'glyphicon glyphicon-remove': !isActive, 'glyphicon glyphicon-ok': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
                </span>
                    </label>
                </div>
            </div>
        </div>
    </form>
</div>

控制器：

function OrderFormController($scope) {
    $scope.inputs = [{
        name: 'Fire Extinguisher Number:',
        id: 1,
        active: false
    }, {
        name: 'Extinguisher Location:',
        id: 2,
        active: false
    }, {
        name: 'Geo Location:',
        id: 3,
        active: false
    }];

    $scope.checks = [{
        name: 'Visual Inspection:',
        id: 4,
        active: false
    }, {
        name: 'Weight:',
        id: 5,
        active: false
    }, {
        name: 'Gague:',
        id: 6,
        active: false
    }, {
        name: 'Hose:',
        id: 7,
        active: false
    }, {
        name: 'Service Complete:',
        id: 8,
        active: false
    }];
}

您能做的最好的事情是将输入字段和复选框分别绑定到对象$scope.inputs和$scope.checks的属性。像这样：

输入：

<div class="row form-group" ng-repeat="input in inputs">
    <div class="well">
        <label for="description" class="col-sm-3 control-label">{{input.name}}</label>
        <div class="input-group">
            <input type="text" class="form-control" required="" placeholder="Enter {{input.name}}" ng-model="input.value" />
            <span ng-class="{'input-group-addon danger' : !input.value, 'input-group-addon success': input.value}">
                <span ng-class="{'glyphicon glyphicon-remove': !input.value, 'glyphicon glyphicon-ok': input.value}"></span>
            </span>
        </div>
    </div>
</div>

像这样的支票：

<div class="row form-group" ng-repeat="check in checks">
    <div class="well">
        <label for="description" class="col-sm-3 control-label">{{check.name}}</label>
        <div class="btn-group" data-toggle="buttons">
            <label ng-class="{'btn btn-danger': !check.active, 'btn btn-success': check.active}" ng-click="check.active = !check.active">
                <input type="checkbox" autocomplete="off" required="" ng-model="check.active" />
                <span ng-class="{'glyphicon glyphicon-remove': !check.active, 'glyphicon glyphicon-ok': check.active}"></span>
            </label>
        </div>
    </div>
</div>

之后，可以很容易地检查是否输入并选择了所有内容：

$scope.isValid = function() {
    var inputsFilled = $scope.inputs.every(function(el) {
        return el.value;
    });
    var allChecked = $scope.checks.every(function(el) {
        return el.active;
    });
    return inputsFilled && allChecked;
};

HTML:

<div ng-if="isValid()">show something</div>

演示：http://plnkr.co/edit/HDYK7cJqN8jkLvQmojB0?p=info

相关文章：