Heim >Web-Frontend >js-Tutorial >Ein erster Blick auf einige grundlegende Stile von AngularJS_AngularJS

Ein erster Blick auf einige grundlegende Stile von AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:48:401230Durchsuche

Ein- und ausblenden

Alles in Angular basiert auf Änderungen am Modell, und diese Änderungen werden durch Bezeichner auf der Schnittstelle widergespiegelt.
ng-show und ng-hide können dasselbe tun. Das Ein- und Ausblenden basiert auf dem Ausdruck, den Sie ihnen übergeben. Das heißt, wenn der Ausdruck wahr ist, wird er von ng-show angezeigt, andernfalls wird er ausgeblendet. Wenn der Ausdruck wahr ist, wird ng-hide ausgeblendet, andernfalls wird es angezeigt. Diese Bezeichner funktionieren, indem sie das Element mit display:block zum Anzeigen und display:none zum Ausblenden formatieren.
CSS-Klassen und -Stile

Die Datenbindung erfolgt durch {{}}-Analyse, sodass Klassen und Stile dynamisch festgelegt werden können.
ng-Klasse und ng-Stil

In großen Projekten kann der obige Ansatz so unhandlich werden, dass Sie sowohl Vorlagen als auch JavaScript lesen müssen, um das CSS korrekt zu erstellen.
Angular bietet Bezeichner der ng-Klasse und des ng-Stils. Jeder von ihnen erfordert einen Ausdruck. Das Ergebnis der Ausdrucksausführung kann eines der folgenden sein:

Eine Zeichenfolge, die einen durch Leerzeichen getrennten Klassennamen darstellt.
Ein Array von Klassennamen
Eine Zuordnung von Klassennamen zu booleschen Werten

Ausgewählte Zeile

In der Vorlage setzen wir den Wert von ng-class auf {selected:$index==selectedRow}. Wenn das Modell selectedRow aufruft, stimmt es mit dem $index von ng-repeat überein und zeigt den ausgewählten Stil an. Ebenso haben wir ng-click eingerichtet, um dem Controller mitzuteilen, auf welche Zeile der Benutzer geklickt hat.
src- und href-Vorschläge

Es wird empfohlen, ng-src und ng-href zu verwenden.

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

Alle Quellcodes

<!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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie eine Diashow (360-Grad-Panoramabild) mit javascript_form-SpezialeffektenNächster Artikel：Erstellen Sie eine Diashow (360-Grad-Panoramabild) mit javascript_form-Spezialeffekten

In Verbindung stehende Artikel

Mehr sehen