AngularJS的一些基本样式初窥


Posted in Javascript onJuly 27, 2015

显示和隐藏

在 Angular 中的一切,都是基于模型的改变,进而通过标识符反映这些变化到界面上。
ng-show 和 ng-hide 可以做相同的事情。显示和隐藏是基于你传递给他们的表达式而定,即,当表达式为 true 时,ng-show 就显示,反之隐藏。当表达式为 true 时,ng-hide 就隐藏,反之显示。这些标识符是通过设置元素的样式 display:block 显示和 display:none 隐藏进行工作的。
CSS类和样式

通过 {{}} 解析来进行数据绑定,从而能够动态地设置类和样式。
ng-class 和 ng-style

在大型项目中,上面的方式会使得难以管理,以至于不得不同时阅读模版和 JavaScript 才能正确地创建 css 。
Angular 提供了 ng-class 和 ng-style 标识符。他们每一个都需要一个表达式。表达式执行的结果可能是下列之一:

  •     一个字符串,表示空间隔开的类名。
  •     一个类名数组
  •     一个类名到布尔值的映射

选中的行

模版中,我们设置 ng-class 的值为 {selected:$index==selectedRow},当模型调用selectedRow 时将匹配 ng-repeat 的 $index,进而显示选中的样式。同样我们设置 ng-click 来通知控制器用户点了哪一行。
src 和 href 建议

建议使用 ng-src 和 ng-href。

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

所有源码

<!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>
Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
JS字符串截取函数实例
Dec 27 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 #Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 #Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 #Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 #Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 #Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 #Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 #Javascript
You might like
codeigniter数据库操作函数汇总
2014/06/12 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
php自动载入类用法实例分析
2016/06/24 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
js onload事件不起作用示例分析
2013/10/09 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
快速入手Python字符编码
2016/08/03 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python适配器模式代码实现解析
2019/08/02 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python属性和内建属性实例解析
2020/01/14 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
介绍一下linux文件系统分配策略
2013/02/25 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
公司端午节活动方案
2014/02/04 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
保安辞职信范文
2015/02/28 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android