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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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
解析php中heredoc的使用方法
2013/06/17 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python多线程学习资料
2012/12/19 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python给图像添加噪声具体操作
2019/03/03 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
七年级地理教学反思
2014/01/26 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
MySQL数字类型自增的坑
2021/05/07 MySQL
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server