ng-model | 易学教程

AngularJS入门（用ng-model指令实现双向绑定）

阅读更多关于 AngularJS入门（用ng-model指令实现双向绑定）

上一章介绍了AngularJS框架的插值语法和ng-bind指令，本章介绍ng-model指令，本指令用于实现input和变量的双向绑定。示例代码： <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <title>ng-model directive</title> </head> <body ng-controller="HelloController"> <div> <p>双向绑定</p> <input ng-model="greeting"> <p>Hello {{greeting || "World"}}</p> <button ng-click="init()">重置</button> <hr> </div> <script src="../lib/angularjs/1.2.26/angular.min.js"></script> <script> function HelloController($scope) { $scope.init = function() { $scope.greeting = "Hello"; } } </script> </body> </html> input加上ng-model指令后，框架会负责input和greeting变量的自动同步。插值中支持表达式语法

AngularJS入门之数据绑定

阅读更多关于 AngularJS入门之数据绑定

本篇我们看一下AngularJS中的数据绑定。虽然我们直到这篇才提到数据绑定，但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了！ ngBind（ng-bind）/ {{ expression }}： 1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <body ng-app> 7 <input ng-model="yourName" /> 8 <p> 9 Hello, {{yourName}} 10 </p> 11 <p> 12 Use ngBind to display: <span ng-bind="yourName"></span> 13 </p> 14 </body> 15 </html> 如果你已经看过前面几篇文章，我相信你已经非常熟悉这样的代码了。AngualrJS中使用ngBind进行数据绑定，但是我们更多的会使用Expression（即{{expression}}这样的写法）替代ngBind，这种写法更简便直观。 AngularJS还提供了其他几种数据绑定方式： ngBindHtml: 1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular

ionic+cordova填坑

阅读更多关于 ionic+cordova填坑

1.命令行更新 cordova，ionic。nodejs ，npm，bower等到新版本，不要在vs中更新 2.程序突然白屏因为拷贝其他程序到js中，乱码；a模拟器打开 f12看控制台错误解决 3.注意多一个逗号，}，造成程序崩掉 4.无法真机调试： a。手机没连 b。重启vs或机器 instead saw 5.增加插件，注意更新app.js 的 config注入 6.service不返回，用在return中写函数 7.controller报错，注意注入$插件 8.$scope.data在controller初始化{}，否则调用显示未定义错误 9.真机调试 iphone anroid ：哈工大代理安装avd，，删除金山手机卫士，否则会占用端口。。 10。fileupload 服务端接收方法见协同平台 11. $state.go("tab.accountlistitem"); 的controller必须存在，只是app.js配置$state.go不会跳转。 12. 升级到cordova 5.0后，在 Android 表现为链接无法打开 cordova 5.0需要手动添加whitelist插件，控制对外部链接的访问权限 cordova plugin add cordova-plugin-whitelist 设置白名单即可。 13.右键获取程序目录， cmd cd到目录，运行命令

Ionic遇到问题2

阅读更多关于 Ionic遇到问题2

1、No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin. 解决办法 index.html 中添加《meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"》 2、ionic 隐藏 nav-bar 文档上来看，需要在controller中调用 $ionicNavBarDelegate 例如 .controller('DashCtrl', function ($scope, $ionicNavBarDelegate) { $ionicNavBarDelegate.showBar(false); }) 但没起作用。最后在模板中使用标签方法 hide - nav - bar = "true" 该方法起作用。 3、 ng-model 与 input 值的问题例如 input type="text" ng-model="querystr" ng-model绑定到$scope.querystr 时

angularJS 小记

阅读更多关于 angularJS 小记

刚刚接触angularJS，网上学习了一遍菜鸟教程（http://www.runoob.com/angularjs/angularjs-tutorial.html），做了些基础知识的笔记。 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 语法：双括号{{ …. }} 根元素 : ng-app=”” ：初始化应用程序初始化数据：ng-init:”a=4; b=5; ”(不常用) 字符串c=’alison’；对象：person={a:”1”,b:”2”} 数组：array={1,2,3} 显示数据：直接使用表达式{{ a+b }} 绑定数据：ng-bind=”a+b” (不常用) ng-model:”a+b” （3）循环元素 : ng-repeat: //放入列表 <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'},

AngularJS内置指令集合

阅读更多关于 AngularJS内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定代码如下: <input type="text" ng-model="someModel.someProperty" /><br> {{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域。这个指令一般会出现在比较小的应用中，比如给个demo什么的... 代码如下: <div ng-init="job='fighter'"> I'm a/an {{job}} </div> 除了ng-init，我们还有更多更好的选择。 ng-app 每一次用AngularJS都离不开这个指令，顺便说下$rootScope。声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在<html>你懂的。也就是说根下的作用域都可以访问它。但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。下面是一个例子: 代码如下: <html ng-app="myApp"> <body> {{ someProperty }} </body> <script> var myApp = angular.module('myApp', []) .run(function($rootScope) { $rootScope

angularjs: ng-select和ng-options

阅读更多关于 angularjs: ng-select和ng-options

angular.js有一个很强大的指令: ng-select 它可以帮助你通过数据模型来创建select元素.它很好的支持了select标签的语法,但是却有点坑. 假设有如下一段json数据: 复制代码 { "myOptions": [ { "id": 106, "group": "Group 1", "label": "Item 1" }, { "id": 107, "group": "Group 1", "label": "Item 2" }, { "id": 110, "group": "Group 2", "label": "Item 3" }, } $scope.myOptions = data.myOptions; 复制代码这段数据很简单: 我有一些分组,每个分组都包含自己的一些选项.如果要直接用这些数据创建select元素是很麻烦的.所以,我把代码重构成下面这样: angularjs会自动进行分组 <select ng-model="myOption" ng-options="value.id as value.label group by value.group for value in myOptions"> <option>--</option> </select> ng-model的值会指向select元素的当前选中项的value值. ng

AngularJS从入门到实践（一）

阅读更多关于 AngularJS从入门到实践（一）

前言前端　 AngularJS是为了克服 HTML 在构建应用上的不足而设计的。（引用百度百科）　　AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令 (directives)的结构，让浏览器能够识别新的语法。（引用百度百科）　　　　　　例如：　　　　　　　　使用双大括号{{}}语法进行数据绑定；　　　　　　　　使用DOM控制结构来实现迭代或者隐藏DOM片段；　　　　　　　　支持表单和表单的验证；　　　　　　　　能将逻辑代码关联到相关的DOM元素上；　　　　　　　　能将HTML分组成可重用的组件。本篇学习主要有两个部分： ①【AngularJS 常用指令】 ②【AngularJS 的 mvc 】　　　　　　　　　　　 1、AngularJS 常用指令【常用指令】　　1.na-app:声明angularjs所管辖的区域，一般写在body或者HTML上原则一个一面只写一个 <body ng-app=""> </body> 2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 <input type="text" id="input" ng-model="name"/> 3.ng-bind 指令把应用程序数据绑定到 HTML 视图。 ①<div id="div" ng

AngularJS快速入门指南04：指令

阅读更多关于 AngularJS快速入门指南04：指令

/*--> */ /*--> */ 　　AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令　　AngularJS指令是带有 ng- 前缀的扩展HTML属性。　　 ng-app 指令用来初始化AngularJS application。　　 ng-init 指令用来初始化application数据。　　 ng-model 指令用来将HTML控件（如input，select，textarea等）的值绑定到application数据。 <div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> 运行　　 ng-app 指令同时也告诉AngularJS，它所在的<div>元素是AngularJS application的根元素，即作用域。数据绑定　　在上面的示例中，{{ firstName }}是一个AngularJS数据绑定表达式。　　在AngularJS数据绑定中，AngularJS表达式使用AngularJS数据进行同步更新。　　 {{ firstName }} 通过 ng-model="firstName" 同步更新数据。

angular-ui-bootstrap插件API - Pagination

阅读更多关于 angular-ui-bootstrap插件API - Pagination

Pagination：案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'> <link rel="stylesheet" href='../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css'> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script> <script> angular.module('myApp',['ui.bootstrap']) .controller('PaginationDemoCtrl', function ($scope, $log) { $scope.totalItems = 64; $scope.currentPage = 4;

订阅 ng-model