angular js 标签使用

最新推荐文章于 2022-04-08 10:21:14 发布

luan_tianjiao

最新推荐文章于 2022-04-08 10:21:14 发布

阅读量1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/luan_tianjiao/article/details/40623627

版权

web 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

http://www.w3schools.com/angular/angular_events.asp

https://docs.angularjs.org/api/ng/directive/ngClick

ng-blur ng-focus

ng-blur 指当标签失去焦点时触发

ng-focus同理，指标签获得焦点时触发

<!DOCTYPE>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
input[type="text"].myFocus{background-color: yellow;}
input[type="text"].myBlur{background-color: red;}
</style>
</head>
<body>
<div  class = "well span4"  style = "margin-top:20px;" ng-init = "focus=false;blur=false;" >
<input  type = "text" ng-class = "{myFocus:focus,myBlur:blur}" ng-focus = "focus=true;" ng-blur="focus=false;blur=true;" >
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>

ng-change $watch

ng-change和watch都可以查看有model改变，并作相应处理

区别在于 $watch针对model改变

ng-change可以计算expression

$scope.myModel = [
    {
        "foo":"bar"
    }
];
//Now if you want to do something whenever any changes happen to myModel you would use $watch:
$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ng-show ng-hide

ng-show为true，显示；false，不显示； ng-hide反之

ng-click

点击事件，ng-click($event) 这个event中可以做一些计算，比如<button ng-click="count = count + 1">Click me!</button>

ng-options

<select ng-model= "Select1" ng-options= "m.ProductName for m in Model" >
  <option value = "" >--请选择--</option>
</select>

这里的value也就是程式码中的m这部分，而m这个物件会从Model阵列中取出一个元素，一次一个元素。
这里的label也就是程式码中的m.ProductName这部分，这一段其实是一个Angular表达式(Angular Expression)。

http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

radio

<div ng-repeat="machine in machines">
  <label style="width:150px;">
  <span style="white-space:pre">	</span><input name="Fruit" type="radio" ng-model="$parent.radioServerip" value="{{machine.serverip}}"/>
        {{machine.serverip}} 
   </label> 
</div>

这里注意，radio中如果使用ng-repeat ，需要在ng-model中绑定$parent.modelname，这样，modelname才能得到正确的radio选择

1.$watch helps to listen for $scope changes

There are two ways of declaring a $scope variable as being watched.

By using it in your template via expression: <span>{{myVar}}</span>
By adding it manually via $watch service

Ad 1) This is the most common scenario and I'm sure you've seen it before, but you didn't know that this has created a watch in the background. Yes it had! Using Angular directives (such as ng-repeat) can also create implicit watches.

Ad 2) This is how you create your own watches. $watch service helps you to run some code when some value attached to the $scope has changed. It is rarely used, but sometimes is helpful. For instance, if you want to run some code each time 'myVar' changes, you could do the following:

function MyController($scope) {

   $scope.myVar = 1;

   $scope.$watch('myVar', function() {
       alert('hey, myVar has changed!');
   });

   $scope.buttonClicked = function() {
      $scope.myVar = 2; // This will trigger $watch expression to kick in
   };

}

2.$broadcase $emit $on

First of all, parent-child scope relation does matter. You have two possibilities to emit some event:

$broadcast -- dispatches the event downwards to all child scopes,
$emit -- dispatches the event upwards through the scope hierarchy.

I don't know anything about your controllers (scopes) relation, but there are several options:

If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl:

function firstCtrl($scope){
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope){
    $scope.$on('someEvent', function(event, mass) {console.log(mass)});
}

In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl).
```
function firstCtrl($rootScope){
    $rootScope.$broadcast('someEvent', [1,2,3]);
}
```

Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope:

function firstCtrl($scope){
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope){
    $scope.$emit('someEvent', [1,2,3]);
}

and current will always be effected. see example.

ng-options

<select ng-model= "Select1" ng-options= "m.ProductName for m in Model" >
  <option value = "" >--请选择--</option>
</select>

http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

luan_tianjiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 标签使用

1.ng-blur ng-focusasd
复制链接

扫一扫

专栏目录

angular js 标签使用

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