Rumah > Artikel > hujung hadapan web > Pandangan pertama pada beberapa gaya asas AngularJS_AngularJS

Pandangan pertama pada beberapa gaya asas AngularJS_AngularJS

WBOYasal: 2016-05-16 15:48:401172semak imbas

Tunjukkan dan sembunyikan

Semua dalam Angular adalah berdasarkan perubahan pada model dan perubahan ini ditunjukkan pada antara muka melalui pengecam.
ng-show dan ng-hide boleh melakukan perkara yang sama. Menunjukkan dan menyembunyikan adalah berdasarkan ungkapan yang anda berikan kepada mereka, iaitu, apabila ungkapan itu benar, ng-show memaparkannya, jika tidak ia menyembunyikannya. Apabila ungkapan itu benar, ng-hide disembunyikan, jika tidak ia dipaparkan. Pengecam ini berfungsi dengan menggayakan elemen dengan display:block to display dan display:none untuk menyembunyikannya.
Kelas dan gaya CSS

Pengikatan data dilakukan melalui penghuraian {{}}, membenarkan kelas dan gaya ditetapkan secara dinamik.
ng-class dan ng-style

Dalam projek besar, pendekatan di atas boleh menjadi tidak terurus, sehinggakan anda perlu membaca kedua-dua templat dan JavaScript untuk mencipta css dengan betul.
Angular menyediakan pengecam ng-class dan ng-style. Setiap daripada mereka memerlukan ekspresi. Hasil pelaksanaan ungkapan mungkin salah satu daripada yang berikut:

Rentetan yang mewakili nama kelas yang dibatasi ruang.
Susunan nama kelas
Pemetaan nama kelas kepada nilai Boolean

Baris yang dipilih

Dalam templat, kami menetapkan nilai ng-class kepada {selected:$index==selectedRow}. Apabila model memanggil selectedRow, ia akan sepadan dengan $index ng-repeat dan memaparkan gaya yang dipilih. Begitu juga kami menyediakan ng-click untuk memberitahu pengawal baris yang diklik oleh pengguna.
cadangan src dan href

Adalah disyorkan untuk menggunakan ng-src dan ng-href.

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

Semua kod sumber

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Buat tayangan slaid (gambar panorama 360 darjah) dengan kesan khas javascript_formArtikel seterusnya：Buat tayangan slaid (gambar panorama 360 darjah) dengan kesan khas javascript_form

Artikel berkaitan

Lihat lagi