【问题标题】:Angular 1/ ng-if one-time binding only in a conditionAngular 1/ ng-if 仅在一个条件下一次性绑定
【发布时间】:2017-07-25 23:11:24
【问题描述】:

在我的模板中:

<div ng-if="$ctrl.show()">
  <input class="form-control" type="text">
</div>

在我的组件中

  show() {
    if (angular.isDefined(this.parking.parkingType)) {
      return this.parking.parkingType.labelKey === 'parking_type.air'
    }
  }

我希望 Angular 仅在单击属性 on-select="$ctrl.show()" 的选择输入(ui-select)时处理该函数:

 <ui-select ng-model="$ctrl.parking.parkingType"
             on-select="$ctrl.show()">
    <ui-select-match allow-clear="true">
        <span>{{ $select.selected.label }}</span>
    </ui-select-match>
    <ui-select-choices repeat="item in $ctrl.parkingType | filter: { label: $select.search }">
        <span ng-bind-html="item.label"></span>
    </ui-select-choices>
  </ui-select>

此案例可能类似于示例案例:仅在单击 ng-click 时启动函数

【问题讨论】:

    标签: javascript angularjs ui-select angular-ui-select angularjs-ng-if


    【解决方案1】:

    将您的 ng-show 更改为变量并保持 on-select="$ctrl.show()" 原样

    在你看来:

    <div ng-if="$ctrl.shouldShow">
      <input class="form-control" type="text">
    </div>
    

    在您的组件中:

    $ctrl.show = function() {
      if (angular.isDefined(this.parking.parkingType)) {
        $ctrl.shouldShow = (this.parking.parkingType.labelKey === 'parking_type.air')
      }
    }
    

    最好不要在 ng-if、ng-show 和 ng-hide 中使用函数,因为它会影响性能

    【讨论】:

    • Angular 不会不断评估变量 $ctrl.shouldShow ?
    • 抱歉,在摘要周期内它会,但评估函数显然会比布尔值花费更多时间,将其设置为布尔值可以为您提供所需的功能
    • 所以如果我理解的话,归根结底是一样的,Angular 一直在寻找 $ctrl.shouldShow 是否存在。到底有什么区别?
    • 这将帮助您阅读 angularjs 摘要循环以进一步了解差异。
    猜你喜欢
    • 1970-01-01
    • 2015-07-11
    • 1970-01-01
    • 2016-11-11
    • 1970-01-01
    • 2016-03-26
    • 2014-09-12
    • 2016-11-09
    • 2014-07-17
    相关资源
    最近更新 更多