Question

我需要根据多个模型值的值更改按钮的标题。我有一个按钮。当模型值为null时，它应显示“Load”，否则显示“refresh”。如果我检查一个模型值它工作正常。如何检查整个模型值。

<button id="load" type="submit" class="btn btn-success" style="float:right" > {{processState.widgetInstance.configuration.application ? 'Refresh':'Load'}}</button>

<ul>
                <li>Application:
                    <select name="application" required ng-model="processState.widgetInstance.configuration.application"  ng-options="app.APP_ID as app.APP_NAME for app in applications">

                    </select>
                </li>
                <li>Namespace:
                    <select name="namespace" required ng-model="processState.widgetInstance.configuration.namespace" ng-options="namespace.NAMESPACE_ID as namespace.NAMESPACE for namespace in namespace">

                    </select>
                </li>

              </ul>

在这种情况下，如果select组合具有值，则应显示refresh else load。在这种情况下，范围变量的值将从服务填充。

Plunker Working Copy

Answer 1

您可以使用角度表单验证http://plnkr.co/edit/UZIqF2qG4UyNdbH4NSHu?p=preview

  <button id="load" type="submit" class="btn btn-success" style="float:right"> {{ myform.$valid ? 'Refresh': 'Load' }}</button>
  <form name='myform'>
    <ul>
      <li>Application:
        <select name="application" required ng-model="processState.widgetInstance.configuration.application" ng-options="app.APP_ID as app.APP_NAME for app in applications">

        </select>
      </li>
      <li>Namespace:
        <select name="namespace" required ng-model="processState.widgetInstance.configuration.namespace" ng-options="namespace.NAMESPACE_ID as namespace.NAMESPACE for namespace in namespace">

        </select>
      </li>

      <li>Products:
        <select name="product" required ng-model="processState.widgetInstance.configuration.product" ng-options="product.PRODUCT_ID as product.PRODUCT_NAME for product in product">

        </select>
      </li>


    </ul>
  </form>

Answer 2

只需使用括号和&&运算符

angular.module("app",[]).controller("ctrl", function($scope){
     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button id="load" type="submit" class="btn btn-success" style="float:right" > {{(application && namespace) ? 'Refresh':'Load'}}</button>

<ul>
                <li>Application:
                    <input ng-model="application" type="text"/>
                </li>
                <li>Namespace:
                      <input ng-model="namespace" type="text"/>
                </li>

              </ul>
  </div>

检查多个ng-model值以更改按钮的标题

2 个答案: