Maison > Article > interface Web > Un premier aperçu de quelques styles de base d'AngularJS_AngularJS

Un premier aperçu de quelques styles de base d'AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:48:401172parcourir

Afficher et masquer

Tout dans Angular est basé sur les modifications apportées au modèle, et ces modifications sont reflétées sur l'interface via des identifiants.
ng-show et ng-hide peuvent faire la même chose. L'affichage et le masquage sont basés sur l'expression que vous leur transmettez, c'est-à-dire que lorsque l'expression est vraie, ng-show l'affiche, sinon il la cache. Lorsque l'expression est vraie, ng-hide est masqué, sinon il est affiché. Ces identifiants fonctionnent en stylisant l'élément avec display:block pour l'afficher et display:none pour le masquer.
Classes et styles CSS

La liaison des données est effectuée via une analyse {{}}, permettant de définir dynamiquement les classes et les styles.
ng-class et ng-style

Dans les grands projets, l'approche ci-dessus peut devenir ingérable, à tel point que vous devez lire à la fois les modèles et JavaScript pour créer correctement le CSS.
Angular fournit des identifiants de classe ng et de style ng. Chacun d’eux nécessite une expression. Le résultat de l’exécution de l’expression peut être l’un des suivants :

Une chaîne représentant un nom de classe délimité par des espaces.
Un tableau de noms de classes
Un mappage des noms de classes avec des valeurs booléennes

Ligne sélectionnée

Dans le modèle, nous définissons la valeur de ng-class sur {selected:$index==selectedRow} Lorsque le modèle appelle selectedRow, il correspondra au $index de ng-repeat et affichera le style sélectionné. De même, nous avons configuré ng-click pour indiquer au contrôleur sur quelle ligne l'utilisateur a cliqué.
suggestions src et href

Il est recommandé d'utiliser ng-src et ng-href.

<img ng-src="/img/01.png">
<a ng-href="www.segmentfault.com">segmentfault</a>

Tout le code source

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>angular demo</title>
  <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"></script>
</head>
<body>
  <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
    <h1>Your demo</h1>
    <!-- demo 1 -->
    <div ng-show='menuState.show'>another another another</div>
    <button ng-click="test2()">切换</button>

    <hr><!-- demo 2 -->
    <style type="text/css">
      .menu-disabled-true{
        opacity:1;
        color: red;
        -webkit-transition:all 1000ms linear;
        -moz-transition:all 1000ms linear;
        -o-transition:all 1000ms linear;
      }
      .menu-disabled-false{
        opacity: 0;
        -webkit-transition:all 1000ms linear;
        -moz-transition:all 1000ms linear;
        -o-transition:all 1000ms linear;
      }
    </style>
    <div class="menu-disabled-{{isDisabled}}">adfadfadasda</div>
    <button ng-click="test()">隐藏</button>
    <button ng-click="test1()">显示</button>
    <button ng-click="test11()">切换</button>

    <hr><!-- demo 3 -->
    <style type="text/css">
    .error {
      background-color: red;
    }
    .warning {
      background-color: yellow;
    }
    </style>
    <div ng-class='{error:isError, warning:isWarning}'>{{messageText}}</div>
    <button ng-click="showError()">error</button>
    <button ng-click="showWarning()">warning</button>

    <hr><!-- demo 4 -->
    <style type="text/css">
      .selected{
        background-color: lightgreen;
      }
    </style>
    <div ng-repeat="item in items" ng-class='{selected:$index==selectedRow}' ng-click='selectedWhich($index)'>
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
    </div>
  </div>

  <script>
    var shoppingCartModule = angular.module("shoppingCart", [])
    shoppingCartModule.controller("ShoppingCartController",
      function ($scope) {
        // demo 1
        $scope.menuState = {'show':true};
        $scope.test2 = function () {
          $scope.menuState.show = !$scope.menuState.show;
        };

        // demo 2
        $scope.isDisabled = true;
        $scope.test = function () {
          $scope.isDisabled = 'false';
        };
        $scope.test1 = function () {
          $scope.isDisabled = 'true';
        };
        $scope.test11 = function () {
          $scope.isDisabled = !$scope.isDisabled;
        };

        // demo 3
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.messageText = 'default, default';
        $scope.showError = function () {
          $scope.messageText = 'This is an error';
          $scope.isError = true;
          $scope.isWarning = false;
        };
        $scope.showWarning = function () {
          $scope.messageText = 'Just a warning, donot warry';
          $scope.isWarning = true;
          $scope.isError = false;
        };

        // demo 4
        $scope.items = [
          { product_name: "Product 1", price: 50 },
          { product_name: "Product 2", price: 20 },
          { product_name: "Product 3", price: 180 }
        ];
        $scope.selectedWhich = function (row) {
          $scope.selectedRow = row;
        }
      }
    );
  </script>
</body>
</html>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Créez un diaporama (image panoramique à 360 degrés) avec des effets spéciaux javascript_formArticle suivant：Créez un diaporama (image panoramique à 360 degrés) avec des effets spéciaux javascript_form

Articles Liés

Voir plus