angularJs ng-switch

 1 <!DOCTYPE html>
 2 <html ng-app="consoleApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>mytest</title>
 6 </head>
 7 <body ng-controller="appCtrl" >
 8
 9 <input type="checkbox" ng-model="che" ng-change="change()"/>
10
11 <div ng-switch on="eip">
12     <span ng-switch-when="checked">1</span>
13     <span ng-switch-when="add">2</span>
14     <span ng-switch-when="add1">3</span>
15 </div>
16
17 </body>
18
19 <script src="angular.js"></script>
20 <script>
21  var consoleApp=angular.module(‘consoleApp‘,[]);
22     consoleApp.controller(‘appCtrl‘,[‘$scope‘,function($scope){
23
24
25         if($scope.che===undefined){
26             $scope.eip = ‘add1‘;
27         }else if($scope.che === true){
28             $scope.eip = ‘checked‘;
29         }else if($scope.che === false){
30             $scope.eip=‘add‘
31         }
32
33         $scope.change = function(){
34             if($scope.che===‘undefind‘){
35                 $scope.eip = ‘add1‘;
36             }else if($scope.che === true){
37                 $scope.eip = ‘checked‘;
38             }else if($scope.che === false){
39                 $scope.eip=‘add‘
40             }
41         }
42     }])
43 </script>
44 </html>
时间: 2024-10-23 22:14:31

angularJs ng-switch的相关文章

Part 15 AngularJS ng init directive

The ng-init directive allows you to evaluate an expression in the current scope. In the following example, the ng-init directive initializes employees variable which is then used in the ng-repeat directive to loop thru each employee. In a real world

Part 6 AngularJS ng repeat directive

ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

[AngularJS] AngularJS系列(1) 基础篇

目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀. 什么是AngularJS? ng是一个js框架,目前最新版本为1.5.8. 官网:https://angularjs.org/ 下载: Install-Package AngularJS.Core npm install [email protected] 为什么使用/n

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

走进AngularJs(八) ng的路由机制

在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState(

AngularJS进阶(三十九)基于项目实例解析ng启动加载过程

基于项目实例解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2.等待,直到DOM树构造完毕. 3.发现ng-app,自动进入启动引导阶段. 4.根据ng-app名称找到相应的路由. 5.加载默认地址. 6.Js顺序执行,加载相应模版页 sys_tpls/home.html 7.在此,可以看到index路由中只是填充了ui-view为sys_login的div模

【AngularJs】---&quot;Error: [ng:areq] Argument &#39;fn&#39; is not a function, got Object&quot;

项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js"></script>就报错了 [原因] 我抽取出来的controller头部也这样写了 angular.module('gflt.controllers', []) 正确写法 angular.module('gflt.controllers') [AngularJs]---"E

转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~,公司请了个中医来给按摩拔罐刮痧,一套下来那个爽啊~,趁着精力充沛了解了下Angular的路由机制,在此分享出来与大家共同学习. 在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以

angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location

参考: https://docs.angularjs.org/api/ng/service/$location 原文地址:https://www.cnblogs.com/lshan/p/8855042.html

angular min js 118 Error ng areq http //errors angularjs

1.错误描述 angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=username&p1=not%20a%20function%2C%20got%20undefined at Error (native) at http://127.0.0.1:8020/AngularJS/js/angular.min.js:6:412 at sb (http://127.0.0.1:8020/Angu