正式禁用 angular 中的 field.hide

Question

angular-formly 的默认隐藏指令是 ng-if，可以通过例如配置formlyConfigProvider.

目前，我的所有字段都应始终显示，我不希望呈现会影响性能的不必要的 ng-if="!field.hide" 检查。

我如何才能正式地告诉 field/form 或全局不使用此检查？

Answer 1

您在 formly-form

中设置了 hide-directive="ng-show"

<formly-form    hide-directive="ng-show"></formly-form>

"hide-directive

允许您控制用于隐藏字段的指令。此值的常见值可能是 ng-show。它将通过!field.hide。您还可以使用 formlyConfig.extras.defaultHideDirective = 'ng-show'"

在全局级别指定它

http://docs.angular-formly.com/docs/formly-form

所以你可以按照我的指示设置它，也可以选择在启动时的配置中为所有字段编辑它

Answer 2

ng-if 从 DOM 添加和删除元素，当你想显示和隐藏大量元素时它可能会很慢，相反你可以使用 ng-show。 ng-show 只会改变元素的可见性。

<html lang="en" itemscope="" itemtype="http://schema.org/Article">
  <head>
    <script>
      var oModelesDep = [];
    </script>  

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://s3.amazonaws.com/gowpres/resources/js/utils/jquery-1.10.2.js"></script>

    <!-- Angular Material Library -->
    <script src="https://www.weldpad.com/starterkit.js?containerId=60515"></script> 

    <script data-meta="61021" src="https://www.weldpad.com/sogettopanswerers.html?containerId=61021"></script>            
  
                
  </head>
  <body ng-controller="AppCtrl" ng-app="MyApp">
    <h4 ng-init="showchat = true">Your - Starter Kit</h4>
    <button ng-click="showchat = false">hide</button>
    <button ng-click="showchat = true">show</button>

    {{showchat}}

    <sogettopanswerers ng-show="showchat" tag="html">
      <div ng-repeat="qdata in listqdata.items track by $index" style="background-color: white;">

        <div class="well" style="overflow: auto;">
          <h2>
            <a href="{{qdata.link}}" class="question-hyperlink">

              {{qdata.title}}
            </a>

            <small>{{qdata.view_count}} Views</small></h2>

          <contentashtml ng-init="load()" content="qdata.body">
          </contentashtml>

          <div style="padding:15px;display: inline-block;vertical-align: top;">
            <p>Name: {{qdata.owner.display_name}}</p>

            <a href="{{qdata.owner.link}}">
              <img ng-src="{{qdata.owner.profile_image}}" alt="Description"/>
            </a>
          </div>
          <div style="display: inline-block;">
            <p>Created: <span am-time-ago="qdata.creation_date * 1000"></span></p>
            <p>
              Last Update:<span am-time-ago="qdata.last_activity_date * 1000"></span>
            </p>
            <p>
              Answered:{{qdata.is_answered}}
            </p>
          </div>
          <p>
            Answers:{{qdata.answer_count}}
          </p>

        </div>

      </div>
    </sogettopanswerers>    

  
  </body>
</html>

看行：

<sogettopanswerers ng-show="showchat" tag="html">

看看响应有多快。

正式禁用 angular 中的 field.hide

Disable field.hide in angular formly

angularjs

angular-formly