Home > Article > Web Front-end > A first look at some basic styles of AngularJS_AngularJS

A first look at some basic styles of AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:48:401207browse

Show and hide

Everything in Angular is based on changes to the model, and these changes are reflected on the interface through identifiers.
ng-show and ng-hide can do the same thing. Showing and hiding are based on the expression you pass to them, that is, when the expression is true, ng-show displays it, otherwise it hides it. When the expression is true, ng-hide is hidden, otherwise it is displayed. These identifiers work by styling the element with display:block to display and display:none to hide it.
CSS classes and styles

Data binding is performed through {{}} parsing, allowing classes and styles to be set dynamically.
ng-class and ng-style

In large projects, the above approach can become unmanageable, so much so that you have to read both templates and JavaScript to create the css correctly.
Angular provides ng-class and ng-style identifiers. Each of them requires an expression. The result of expression execution may be one of the following:

A string representing a space-delimited class name.
An array of class names
A mapping of class names to Boolean values

Selected row

In the template, we set the value of ng-class to {selected:$index==selectedRow}. When the model calls selectedRow, it will match the $index of ng-repeat and display the selected style. Similarly we set up ng-click to notify the controller which row the user clicked.
src and href suggestions

It is recommended to use ng-src and ng-href.

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

All source code

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Create slideshow (360-degree panoramic picture) with javascript_form special effectsNext article：Create slideshow (360-degree panoramic picture) with javascript_form special effects

See more

A first look at some basic styles of AngularJS_AngularJS

Related articles