angularJs

目录

一、数据定义与引用逻辑

  • 定义数组:
一维数组: var arr = new Array('William','aWilliam','abWilliam');//数组初始化
二维数组: var arr=[{id:"001",name:"上海"},{id:"002",name:"北京"}];
删除数组值:arr.splice(0,2);//从0项开始,删除后面的2个值.
增加数组值:arr.splice(0,1,"name1","name2");//从0项开始删除1个值(William)后,跟随插入值name1和name2.
获取数组值:a=arr[0].name,a 的值为”上海”;
arr.pop();//这里是删除数组的最后一个元素
concat(otherArray) 将数组的内容和数据指定的参数链接起来 返回数组
join(,)将数组元素加上,号,然后连接起来,返回字符串
slice(start,end)返回数组的一部分
sort()排序数组中的成员
unshift(item)类似push 从开头插入元素

定义函数:

Angular函数:
方式1:$scope.totalPrice=function(){
        return 1000;
}
方式2:function totalPrice ($scope) {
       return 1000;
}
$scope.getCountry = function (city) {
                    switch (city) {
                        case "London":
                            return "UK";
                        case "New York":
                            return "USA";
                    }
                }

定义模型:

var mymodule = angular.module("mymodule", []);
module对象
    animation(name,factory)支持动画特性
    config(callback) 注册一个在模块加载时对该模块配置的函数
    constant('name', value)定义一个返回常量的服务
    controller(name,constructor)创建一个控制器
    directive(name,factory)创建一个指令
    factory(name provider)创建一个服务
    filter()创建过滤器
    provider()
    name返回模块名称
    run(callback)注册一个在angularjs加载完毕后对所有模块进行配置的函数
    service('name', ['', function(){}])创建一个服务
    value('name', value)返回一个常量的服务

定义控制器:

mymodule.controller('mycontroller', ['$scope', function($scope){  }]);
无作用域控制器:
    <script>
        var app = angular.module("exampleApp", [])
            .controller("simpleCtrl", function () {
                this.dataValue = "Hello, Adam";

                this.reverseText = function () {
                    this.dataValue = this.dataValue.split("").reverse().join("");
                }
            });
    </script>
</head>
    <div class="well" ng-controller="simpleCtrl as ctrl"> //需要指定代名词
        <h4>Top Level Controller</h4>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"
                        ng-click="ctrl.reverseText()">Reverse</button> //需要通过代名词引用
            </span>
            <input class="form-control" ng-model="ctrl.dataValue">
        </div>
    </div>

html使用script语句的两种方法:

1)页面中直接引用:
<html><script type="text/javascript">代码</script></html>;
2)引用js文件,在js文件里填写代码,但不需要<script></script>括起来:
<script src="js/myjs.js" type="text/javascript"></script>

js文件获取html页面录入的值(在js文件里定义):

var a=document.getElementById("first").value; 
var body = document.getElementsByTagName('body')[0];

js文件获取html页面录入的值(在js文件里定义):

var a=document.getElementById("first").value; 
var body = document.getElementsByTagName('body')[0];

html获取js文件里的值:

1)在js里直接定义html的值:
js: function show(){
document.getElementById("three").value="name";
document.getElementById("foure").innerHTML = "<h1>name2</h1>";
}
html: <input id="three" type="text" onclick="show()"></input> //通过调用js函数show(),value会显示为name.

备注:Button、CheckBox、Radio(Reset、Submit)标签;(Text、Hidden)默认值;(File、Password、Text控件用value有效)。td、div等html元素,没有value/text属性,只能用innerHtml;

html页面调用angular函数

js:$scope.show1=function(a){
            a=2000;
            alert(a);
        }
Html:<input type="text" ng-click="show1()">

2)通过html调用module下controller的值{{}},但必须使用$scope先把值传到孤岛(缓冲区):
Js: var mymodule = angular.module("mymodule", []);
    mymodule.controller('mycontroller', ['$scope', function($scope){
        var arr=[{id:"001",name:"上海"},{id:"002",name:"北京"}];
        $scope.freetrial =arr;
    }]);
Html: <body ng-app="mymodule">
<div id="aaa" ng-controller="mycontroller">
<span>{{freetrial[0].name}}</span>
<span ng-bind="freetrial[0].name"></span>
<span ng-repeat="(key, value) in freetrial">{{value.id}}</span>
</div>
</body>

Html调用angular的js函数:
Js:$scope.totalPrice=function(){
        return 1000;
}
Html:<th ng-bind="totalPrice()"></th>

Cookie用法(跨页面传数据):

设置cookie: fac.setCookie("gradeName",gradeName);
引用cookie: a = fac.getCookie("gradeName");

过滤器

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

控制器获取repeat的值 parent.conf[ index]:

<tbody ng-repeat="param in params">
 <tr>
   <td>{{param}}</td>
   <td><input name="test" class="form-control" type="text" ng-trim="false" ng-model="$parent.conf[$index]"/></td>
</tr>
</tbody>

合并对象

$.extend({height: $scope.tableHeight},$scope.TableOption);
  • LaTex数学公式
  • UML序列图和流程图
  • 离线写博客
  • 导入导出Markdown文件
  • 丰富的快捷键

快捷键

  • 加粗 Ctrl + B
  • 斜体 Ctrl + I
  • 引用 Ctrl + Q
  • 插入链接 Ctrl + L
  • 插入代码 Ctrl + K
  • 插入图片 Ctrl + G
  • 提升标题 Ctrl + H
  • 有序列表 Ctrl + O
  • 无序列表 Ctrl + U
  • 横线 Ctrl + R
  • 撤销 Ctrl + Z
  • 重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题,将某些文字标记为粗体或者斜体,创建一个链接等,详细语法参考帮助?。

本编辑器支持 Markdown Extra ,  扩展了很多好用的功能。具体请参考Github.

表格

Markdown Extra 表格语法:

项目价格
Computer$1600
Phone$12
Pipe$1

可以使用冒号来定义对齐方式:

项目价格数量
Computer1600 元5
Phone12 元12
Pipe1 元234

定义列表

Markdown Extra 定义列表语法: 项目1 项目2
定义 A
定义 B
项目3
定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码,例如:

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

脚注

生成一个脚注1.

目录

[TOC]来生成目录:

数学公式

使用MathJax渲染LaTex 数学公式,详见math.stackexchange.com.

  • 行内公式,数学公式为: Γ(n)=(n1)!nN
  • 块级公式:

x=b±b24ac2a

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图:

Created with Raphaël 2.1.0 张三 张三 李四 李四 嘿,小四儿, 写博客了没? 李四愣了一下,说: 忙得吐血,哪有时间写。

或者流程图:

Created with Raphaël 2.1.0 开始 我的操作 确认? 结束 yes no
  • 关于 序列图 语法,参考 这儿,
  • 关于 流程图 语法,参考 这儿.

离线写博客

即使用户在没有网络的情况下,也可以通过本编辑器离线写博客(直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中,内容实时保存在浏览器缓存中,在用户关闭浏览器或者其它异常情况下,内容不会丢失。用户再次打开浏览器时,会显示上次用户正在编辑的没有发表的内容。

博客发表后,本地缓存将被删除。 

用户可以选择 把正在写的博客保存到服务器草稿箱,即使换浏览器或者清除缓存,内容也不会丢失。

注意:虽然浏览器存储大部分时候都比较可靠,但为了您的数据安全,在联网后,请务必及时发表或者保存到服务器草稿箱

浏览器兼容

  1. 目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
  2. IE9以下不支持
  3. IE9,10,11存在以下问题
    1. 不支持离线功能
    2. IE9不支持文件导入导出
    3. IE10不支持拖拽文件导入


  1. 这里是 脚注内容.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GY程序源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值