javascript - without - ngif else angular 6




AngularJS-Come usare ng-if senza elemento HTML (4)

Prova questo: - http://jsfiddle.net/adiioo7/9mgTS/1/

div1 è il contenitore genitore per div2,div3,div4 , se non vuoi div1 nell'output html usa questo: -

<div ng-app="App">Click me:
    <input type="checkbox" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div class="div2" ng-if="checked">ABC</div>
    <div class="div3" ng-if="checked">KLM</div>
    <div class="div4" ng-if="checked">PQR</div>
</div>

MODIFICARE:-

Utilizzando angular js e jQuery: - http://jsfiddle.net/adiioo7/9mgTS/3/

Assegna una classe comune (esempio myClass ) a tutti gli elementi relativi a quel gruppo.

JS: -

angular.module('App', []);

function myController($scope) {
    $scope.change = function () {
        angular.element(".myClass").toggle();
    };
}

HTML: -

<div ng-app="App" ng-Controller="myController">Click me:
    <input type="checkbox" ng-change="change()" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div id="div2" class="myClass">ABC</div>
    <div id="div3" class="myClass">KLM</div>
    <div id="div4" class="myClass">PQR</div>
</div>

C'è un modo per dire ad AngularJS di non mostrare l'elemento HTML in alto che ha la direttiva ng-if . Voglio angolare per visualizzare solo i contenuti figlio.

Codice angolare:

    <div ng-if="checked" id="div1">
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
   </div>

HTML reso:

   <div id="div1"> 
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
   </div>

Quello che voglio:

   <div id="div2">ABC</div>
   <div id="div3">KLM</div>
   <div id="div4">PQR</div>

Ecco un violino. http://jsfiddle.net/9mgTS/ . Non voglio #div1 in HTML. Voglio solo #div2,3,4 se il checked è true .

Una possibile soluzione può aggiungere ng-if a tutti gli elementi figlio ma non voglio farlo.


C'è una coppia di direttive attualmente non documentata, ng-if-start e ng-if-end , che puoi usare per questo. Si comportano in modo analogo alle direttive documentate ng-repeat-start e ng-repeat-end , e puoi vedere i test unitari per loro se lo desideri.

Ad esempio, dato il seguente codice:

<ul>
  <li ng-if-start="true">a</li>
  <li>b</li>
  <li>c</li>
  <li ng-if-end>d</li>
  <li ng-if-start="false">1</li>
  <li>2</li>
  <li>3</li>
  <li ng-if-end>4</li>
</ul>

i primi quattro vengono mostrati e quelli finali saranno nascosti.

Ecco un esempio dal vivo su CodePen: http://codepen.io/anon/pen/PqEJYV

Esistono anche le direttive ng-show-start e ng-show-end che funzionano esattamente come ci si aspetterebbe che facciano.


Non capisco perché non vuoi usare un div padre, ma questa sarebbe una buona soluzione se hai +20 div:

HTML

   <div ng-repeat="div in divs" ng-if="checked" id="{{div.name}}">{{div.content}}</div>

JS

app.controller('myCtrl', function($scope) {
    $scope.checked = true;
    $scope.divs = {
         {'name': 'div2', content:'ABC'},
         {'name': 'div3', content:'KLM'},
         {'name': 'div4', content:'PQR'}
    }
});

Se si è felici di creare una direttiva personalizzata, è possibile applicare ng-if ai bambini a livello di programmazione e appiattire il DOM nel processo:

Codice della direttiva

.directive('ngBatchIf', function() {
    return {
        scope: {},
        compile: function (elm, attrs) {
            // After flattening, Angular will still have the first element
            // bound to the old scope, so we create a temporary marker 
            // to store it
            elm.prepend('<div style="display: none"></div>');

            // Flatten (unwrap) the parent
            var children = elm.children();
            elm.replaceWith(children);

            // Add the ng-if to the children
            children.attr('ng-if', attrs.ngBatchIf);

            return {
                post: function postLink(scope, elm) {
                    // Now remove the temporary marker
                    elm.remove();
                }
            }
        }
    }
})

Codice angolare:

<div id="div1" ng-batch-if="checked">
    <div id="div2">ABC</div>
    <div id="div3">KLM</div>
    <div id="div4">PQR</div>
</div>

HTML reso:

<div id="div2" ng-if="checked">ABC</div>
<div id="div3" ng-if="checked">KLM</div>
<div id="div4" ng-if="checked">PQR</div>

Fiddle: http://jsfiddle.net/o166xg0s/4/





angularjs-ng-if