现在的位置: 首页 > 综合 > 正文

AngularJS基础

2019年05月30日 ⁄ 综合 ⁄ 共 3171字 ⁄ 字号 评论关闭

http://www.ituring.com.cn/article/15764


**$watch(watchExpression, listener, objectEquality)

Registers a listener callback
to be executed whenever the 
watchExpression changes.

Radio

<label class="radio inline">
        <input type="radio" ng-model="ngrdo" value="DDNS" ng-disabled="!ngchk0">{{}}
      </label>&nbsp;&nbsp;
      <label class="radio inline">
         <input type="radio" ng-model="ngrd0" value="DHCP" ng-disabled="disrdo">{{}}
      </label>

ng-repeat--对一行里的列元素运用
     <tr >
        <td ng-repeat="item in generalInfoStr.STR_CONNECT_HEADER">
          <span ng-bind="item"></span>
        </td>
      </tr>

ng-class

  1. <png-class="{strike:
    deleted, bold: important, red: error}"
    >Map Syntax Example</p>
  2. <inputtype="checkbox"ng-model="deleted">
    deleted (apply "strike" class)
    <br>
  3. <inputtype="checkbox"ng-model="important">
    important (apply "bold" class)
    <br>
  4. <inputtype="checkbox"ng-model="error">
    error (apply "red" class)
  5. style.css
  1. .strike{
  2. text-decoration: line-through;
  3. }
  4. ng-style
  1. <inputtype="button"value="set"ng-click="myStyle={color:'red'}">
  2. <inputtype="button"value="clear"ng-click="myStyle={}">
  3. <br/>
  4. <spanng-style="myStyle">Sample
    Text
    </span>

date

{{1288323623006 | date:'medium'}}:
Oct 29, 2010 11:40:23 AM

{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}:
2010-10-29 11:40:23 +0800

{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}:
10/29/2010 @ 11:40AM

定义module和controller,controller是module的属性

var myAppModule = angular.module('myApp', []);

myAppModule.controller('TextController', function($scope)
{
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});

AngularJS脚本标签

    这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域。
<scriptsrc="lib/angular/angular.js"></script>

迭代器
<ul>
<ling-repeat="phone
in phones"
>

{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>

Directive(指令)机制
http://damoqiongqiu.iteye.com/blog/1917971
<body>
<hello></hello>
</body>
script src="../angular-1.0.3/angular.min.js"></script>
<script src="HelloDirect.js"></script>
</html>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there</div>',
replace: true
};

});


ng-click
<button ng-click="insertTom()">Insert</button>

AJAX实现

$http({
method: 'GET',
url: ''
}).
success(function(data, status) {
eval(data);
}
}).
error(function(data, status) {
});

$http信息交互,success进行正常处理,从data中获得数据;error异常处理。

input checkbox

<label class="checkbox">

     <input type="checkbox" ng-model="ngNTPMode" ng-click='enableNTP()'>{{commonInfoStr.autoCfgNtpNote}}</label>

设置选中状态:

    $scope.ngNTPMode=true;//选中

   $scope.ngNTPMode=false;//未选中

input text

<input id="idtxtNTPServer" ng-model="ngNTPServer" class="classicTxtBox" type="text" maxlength="255">

内容赋值:$scope.ngNTPServer=value;

$scope+字符串连接访问元素

$scope["ngchkSMTPEnable"+server]

angular select

<select ng-model="nglstLANChannel" id="idlstLANChannel" class="smallclassicTxtBox" ng-options="c.CHANNEL_NUM for c in SMTPCFG_DATA" ng-change="reloadSMTPCfg()">

$scope.nglstLANChannel获取的是当前选项所指向的SMTPCFG_DATA数组中的一个对象,所以可以用这个东西获取当前对象的任意一个元素,如$scope.nglstLANChannel.CHANNEL_NUM 

$scope.nglstLANChannel = $scope.SMTPCFG_DATA[0],对select进行初始化选择。

<a href="" class="btn" ng-disabled="true">

ng-disabled对<a>不起作用

{{}}在界面显示源码

1.用ng-bind替代

2.用在前面加ng-cloak标志

抱歉!评论已关闭.