angularjs if statements?

后端 未结 8 1782
暖寄归人
暖寄归人 2021-01-04 20:06

So I\'m running through the tutorial for AngularJS:

I have an array defined in the controller and i\'m returning different points in the array by calling when i\'m l

相关标签:
8条回答
  • 2021-01-04 20:30

    In the case where your priority would be a label, you could create a switch filter to use inside of ng-class as shown in a previous SO answer : https://stackoverflow.com/a/8309832/1036025 (for the switch filter code)

    <p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>
    
    0 讨论(0)
  • 2021-01-04 20:32

    This first one is a directive that evaluates whether something should be in the DOM only once and adds no watch listeners to the page:

    angular.module('setIf',[]).directive('setIf',function () {
        return {
          transclude: 'element',
          priority: 1000,
          terminal: true,
          restrict: 'A',
          compile: function (element, attr, linker) {
            return function (scope, iterStartElement, attr) {
              if(attr.waitFor) {
                var wait = scope.$watch(attr.waitFor,function(nv,ov){
                  if(nv) {
                    build();
                    wait();
                  }
                });
              } else {
                build();
              }
    
              function build() {
                iterStartElement[0].doNotMove = true;
                var expression = attr.setIf;
                var value = scope.$eval(expression);
                if (value) {
                  linker(scope, function (clone) {
                    iterStartElement.after(clone);
                    clone.removeAttr('set-if');
                    clone.removeAttr('wait-for');
                  });
                }
              }
            };
          }
        };
      });
    

    This second one is a directive that conditionally applies attributes to elements only once without watch listeners:

    i.e.

    <div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>
    
    angular.module('setAttr',[]).directive('setAttr', function() {
      return {
        restrict: 'A',
        priority: 100,
        link: function(scope,elem,attrs) {
          if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
          //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
            var data = scope.$eval(attrs.setAttr);
    
            angular.forEach(data, function(v,k){
    
              if(angular.isObject(v)) {
                if(v.value && v.condition) {
                    elem.attr(k,v.value);
                    elem.removeAttr('set-attr');
                }
              } else {
                elem.attr(k,v);
                elem.removeAttr('set-attr');
              }
            });
          }
        }
      }
    });
    

    Of course your can use dynamic versions built into angular:

    <div ng-class="{ 'myclass' : item.iscool }"></div>
    

    You can also use the new ng-if added by angularjs which basically replaces ui-if created by the angularui team these will conditionally add and remove things from the DOM and add watch listeners to keep evaluating:

    <div ng-if="item.iscool"></div>
    
    0 讨论(0)
提交回复
热议问题