获取焦点ng-focus实例

最新推荐文章于 2020-12-20 19:05:49 发布

wjxbj

最新推荐文章于 2020-12-20 19:05:49 发布

阅读量523

点赞数

分类专栏： AngularJS 文章标签：获取焦点 ng-focus

本文链接：https://blog.csdn.net/wjxbj/article/details/84742576

版权

AngularJS 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

test.html

<html>
<head>
	<title>获取焦点ng-focus实例</title>
</head>
<body ng-controller="Controller">
	<h1>获取焦点ng-focus实例</h1>
	<div>演示实例：你可以点击获取焦点，当前焦点在：{{currFocus}}(普通js：target.getAttribute('name'))</div>
  <div>演示实例：你可以点击获取焦点，当前焦点在：{{jQCurrFocus}}(jQuery：$(target).attr('name'))</div>
	<div>
	  <ul ng-init="fields = ['name', 'sex', 'age', 'birthday', 'address', 'country']">
		  <li ng-repeat="field in fields">
		    <input type="text" name="{{field}}" placeholder="text your {{field}}" ng-focus="getCurrFocus($event.target)" />
		  </li>
		</ul>
	</div>
	
	<script src="jquery-1.8.3.js"></script>
	<script src="angular1.2.9.js"></script>
	<script src="app.js"></script>
</body>
</html>

app.js

var app = angular.module('myModule', []);
app.controller('Controller', ['$scope', function($scope) {

  $scope.getCurrFocus = function(target) {
    $scope.currFocus = target.getAttribute('name');
    $scope.jQCurrFocus = $(target).attr('name');
  };
}]);

angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

运行效果：