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

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

我似乎不知道如何让它对所有的输入字段都起作用

有什么想法吗

<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>

---

您所能做的最好的事情是将输入字段和复选框分别绑定到对象的属性

$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>

HTML:

展示一些东西

---

演示：

您希望何时以及如何“显示文本”？显示一些内容我正试图根据所有输入文本和具有值或为真的复选框等显示此行。因此，所有内容都应该填写或选中？正好如此，我可以在顶部显示，比如绿色类或文本等

<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;
};

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