`

获取焦点ng-focus实例

阅读更多

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']);  
});

运行效果:



文章来源:http://each.sinaapp.com/angular/tutorial/ng-focus.html

  • 大小: 17.3 KB
分享到:
评论

相关推荐

    AngularJS基础 ng-focus 指令简单示例

    该实例在输入框每次获取焦点时,计算变量"count"会自动加1。 &lt;h1&gt;{{count}} ``` 在这个例子中,`ng-app`指令声明了当前页面的AngularJS应用。`ng-init`指令用于初始化变量`count`的值为0。`ng-focus`指令则...

    vue3 获取焦点,vu3 input 获取焦点 Vue 3 focus input

    我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=&gt;{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点,请看附件,已经正常使用。 请放心下载

    vim-tmux-focus-events, 使终端vim和tmux更好地协同工作.zip

    vim-tmux-focus-events, 使终端vim和tmux更好地协同工作 tmux-focus-events.vimFocusGained 和 FocusLost 自动命令事件在终端vim中不工作。 这个插件在使用vim内部Tmux时恢复它们。以下是相关内容:vim fugitive插件...

    Boundary-Finding-based-Multi-focus-Image-Fusion-master.zip

    标题中的"Boundary-Finding-based-Multi-focus-Image-Fusion-master.zip"揭示了这是一个关于多焦点图像融合技术的项目,其中可能包含源代码和相关研究文章。这个技术是图像处理领域的一个重要分支,主要目的是将不同...

    LytroDataset

    ===============================...https://mansournejati.ece.iut.ac.ir/content/lytro-multi-focus-dataset 其中 all-in-focus图像采用Multi-scale weighted gradient-based fusion for multi-focus images合成的

    fine-focus 800

    fine-focus 800是一种高性能的等离子切割设备,由凯尔贝公司生产。该设备主要应用于CNC控制的切割系统中,其技术名为PLUS-technology。PLUS-technology是一种先进的切割技术,它使得设备在干式和水下切割作业中都...

    MFFW数据集(13对图像)MFFW: A new dataset for multi-focus image fusion

    原文:MFFW: A new dataset for multi-focus image fusion (原文提到是19对图像),由于在原文中无法找到相关的下载链接,因此将整理的资源下载下来免费提供给各位。 如何后面有谁找到原始的19张图像,记得联系...

    解决angular双向绑定无效果,ng-model不能正常显示的问题

    &lt;input type="text" ng-model="paramValue" auto-focus&gt; $scope.paramValue = param; ``` 这段代码看起来应该工作,但实际情况是,尽管`$scope.paramValue`在JavaScript中已经被赋值,但在视图上却未正确显示。...

    vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    首先,vue-auto-focus是一个专门用于Vue的自定义指令,通过它可以方便地控制Vue实例中input或textarea元素的聚焦行为。在使用时,只需在需要自动聚焦的元素上添加v-auto-focus指令,并通过绑定一个控制聚焦行为的...

    PyPI 官网下载 | azcam-focus-21.2.0.tar.gz

    在本篇文章中,我们将聚焦于一个名为"azcam-focus-21.2.0.tar.gz"的资源,它是从PyPI官网上获取的。此资源是一个压缩包,包含了名为"azcam-focus-21.2.0"的Python库。 首先,我们要理解Python库的概念。Python库是...

    Multi-focus image fusion with a deep convolutional neural network的源码

    标题中的“Multi-focus image fusion with a deep convolutional neural network”是一种图像处理技术,它利用深度卷积神经网络(Deep Convolutional Neural Network, DCNN)来实现多焦点图像的融合。这种技术的主要...

    creative-focus.rar

    Creative Focus是最小,敏感,对开发人员友好的WordPress主题,具有简洁现代的布局。主题已准备好小部件,经过SEO优化,快速加载并且易于自定义。它具有1、2或3列,并支持Schema.org微数据格式。

    pic-set-focus.rar_focus

    要让PictureBox获取焦点,你需要获取它的句柄(HWND),这可以通过`Control.Handle`属性获取,然后调用`SetFocus`函数: ```csharp IntPtr pictureBoxHandle = pictureBox1.Handle; SetFocus(pictureBoxHandle); ``...

    Button-Flash-Focus-Images.zip_focus

    本文将详细解析标题为"Button-Flash-Focus-Images.zip_focus"的压缩包内容,它涉及的是一个单按钮Flash焦点图的代码实现,用于实现用户点击按钮时切换焦点图并预览下一张图片的功能。 首先,我们要理解什么是焦点图...

    前端项目-vue-focus.zip

    描述中提到"前端项目-vue-focus"是一个包含"可重用Vue.js组件的一组可重用焦点指令",这暗示该项目提供了一系列Vue指令,这些指令可以帮助开发者在Vue应用中更方便地处理元素的获取和失去焦点的行为。在Web开发中,...

    100种不同图片切换效果插件pageSwitch-jquery-change-focus

    而缩放和旋转效果则能吸引用户的注意力,适用于强调某个焦点。 四、使用方法 使用"PageSwitch-jquery-change-focus"非常简单,首先需要在页面中引入jQuery库和PageSwitch插件的JS及CSS文件。然后,对需要进行切换...

    Canon的三种自动对焦模式(ONE-SHOT、AI-FOCUS-、AI-SERVO)探讨.docx

    - **A**:理论上可以,但实际上,AI-SERVO模式倾向于从中央对焦点开始跟踪,并根据需要自动使用其他对焦点。 **Q4**:如果选择了中央对焦点作为自动对焦点,当物体离开该区域时,AI-SERVO模式还有效吗? - **A**:...

Global site tag (gtag.js) - Google Analytics