AngularJs Test demo

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/angular.js"></script>
</head>
<body ng-app="app" ng-controller="cur">
    how are you!
    <div>
        <input type="text" ng-model="name" />
        {{name}}
        <button ng-click="pop(this)">pop</button>
    </div>
    <ul>
        <li ng-repeat="num in list">{{num}}</li>
    </ul>
    <select>
        <option ng-repeat="no in select" value="{{no}}">{{no}}</option>
    </select>
    <div ng-show="show()">ng show test</div>
    <div ng-show="show1">ng show test boolean</div>
    <script>
        var app = angular.module(‘app‘, []);
        app.controller(‘cur‘, function ($scope) {
            $scope.name = ‘test‘;
            $scope.list = [1, 2, 3, 4];
            $scope.select = [4, 3, 2, 1];
            $scope.pop = function (obj) {
                //alert(obj);
                alert($scope.name);
            }
            $scope.show = function () {
                return false;
            };
            $scope.show1 = true;
        });
    </script>
</body>
</html>

 

时间: 2024-08-04 05:27:27

AngularJs Test demo的相关文章

angularjs完整demo例子

AngularJS的主要特点是 mvc 数据双向绑定 分模块 依赖注入 mvc m: $Scope 变量 V:视图 c:controller=function(){} 控制器 方法 Angularjs的用法 1.在一个有起始标签的元素开始标签内使用 ng-app来指定angularjs的作用范围 2.angularJS的表达式是双大括号 {{}} 里面可以显示变量,数学运算,执行方法 3.ng-model=“变量名” 在输入框内可以绑定一个变量,此变量前端输入的值和js代码中的值是双向绑定的,一

AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的官方的Guide http://www.ituring.com.cn/minibook/303  翻译的官方的tutorial http://www.lovelucy.info/angularjs-best-practices.html  Angular最佳实践 http://zouyesheng.

angularJS培训之helloworld篇

学习一门新的语言我们总是来句'hello,world!',来,我们看下angularJS的helloworld版本是怎么实现的. 1.首先我们下载angularJS库,你可以从官网angularjs.org或者github下载,也可以从github上的         angular-seed 项目中找到对应库文件,也可以通过Google的CDN网络加载文件.通过script标签引入到文件中 2.开发工具 js开发的神器首推webstorm莫属,超强的重构能力,karma,grunt的支持,js

2017 新的开始 想有点不一样

过去一年,换了工作的缘故,一直奔跑在全栈开发的道路上.从web开发的小白到如今的不那么白的小白,感觉进步还是蛮大的.今年的工作任务依然严峻,但是工作之余还是希望自己业务能有些自己的事情做.把想做的事情列下来,明年回头看自己怎么"囧" ^_^! 1) 参加软考,系统架构设计师的考试不是为了什么,仅仅是想强迫自己看下枯燥的系统知识,磨练下自己的意志. 2)Github上开几个项目,目前的水平也就是做些Java学习的Demo,Angularjs的Demo等等吧,嗯,要做起来. 3)博客要经常

Angular2 Hello World 之 RC6

angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.codeproject.com/Articles/1124864/ASP-NET-Core-and-Angular-Code-Venture-Part 首先还是先创建一个ASP.NET Core Web Application空应用程序.还是在Startup.cs类中添加静态文件处理,下面说一下几处和上一篇

AngularJS中实现无限级联动菜单(使用demo)

原文地址:http://www.cnblogs.com/front-end-ralph/p/5133122.html 昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代码请移步上一个帖子:http://www.cnblogs.com/front-end-ralph/p/5131687.html 1. 同步加载子选项在各联动菜单加载之前,我们已经通过

C# webApi 与 AngularJs 实现增删改Demo 讲解(一)

公司在使用webAPI+AngularJs+SlcikGrid进行产品开发,自己也是初学Angular,就做了一个Demo,实现增删改功能,希望可以帮助大家. 界面如同所示:  数据库一张单表很简单,如图所示:  所有JS代码如下: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="infoApp"> 3 <head> 4 <meta

购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证

原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车案例,非常精彩,这里这里记录下对此项目的理解. 文章:http://chsakell.com/2015/01/31/angularjs-feat-web-api/http://chsakell.com/2015/03/07/angularjs-feat-web-api-

购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session

原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车案例,非常精彩,这里这里记录下对此项目的理解. 文章:http://chsakell.com/2015/01/31/angularjs-feat-web-api/http://chsakell.com/2015/03/07/angularjs-feat-web-api-en