标签: angularjs-ng-click
angularjs ng-click和href on anchor
如果在锚点上有一个ng-click和一个href,则ng-click不起作用.如果可能,我希望两者都工作,转到路线,然后运行一个功能.我的用例是我打开一个带有一个链接面板的抽屉,当我想要关闭抽屉的链接时.
什么是让两者同时工作的简单方法？
推荐指数
解决办法
查看次数
如何禁用ng-click的表单验证？
我有一个表单,其中某些输入具有"必需"属性.我还有一个按钮,在单击时添加表单字段,但是当未填写必填字段时,它总是触发表单验证消息.我只想要表单验证来触发ng-submit而不是ng-click.这可能吗？
推荐指数
解决办法
查看次数
如何删除ng-click所在的行？
在以下代码中,当我删除客户时,我希望TR行消失.
做这个的最好方式是什么？我是否需要以某种方式将行作为参数发送到deleteCustomer？我是否可以以某种方式访问AngularJS中的TR DOM元素？
<html ng-app="mainModule">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainController" style="padding: 20px">
<div class="col-lg-5">
<table style="width: 500px" class="table-striped table-bordered table table-hover">
<tr ng-repeat="customer in customers">
<td style="width:50px"><button ng-click="deleteCustomer(customer)">Delete</button></td>
<td style="text-align:right">{{customer.id}}</td>
<td>{{customer.firstName}}</td>
<td>{{customer.lastName}}</td>
</tr>
</table>
</div>
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">Logger</div>
<div class="panel-body" style="padding:0">
<table class="table table-bordered" style="margin:0">
<tr ng-repeat="loggedAction in loggedActions">
<td>{{loggedAction.action}}</td>
<td>{{loggedAction.description}}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var mainModule = angular.module('mainModule', []);
function mainController($scope) {
$scope.loggedActions = []; …推荐指数
解决办法
查看次数
如何使用angularJS和jqlite测试event.target.hasClass()？
单击后将事件传递给ctrl.我想编写一个条件,如果element.target有类,它将返回truemodal-click-shield
题:
如何使用.hasClass()与event.target利用angulars' jqlite？
问题:
目前我收到类型错误说:
$scope.exitModal = function(event){
// Return to current page when exiting the modal, via UI.
// After state return, should set focus on the matching link.
var target = event.target;
console.log(target.hasClass('modal-click-shield'));
});
错误:
TypeError: undefined is not a function
HTML:
<div class="modal-click-shield" ng-click="exitModal($event)">
<div ui-view="pdw" class="product-container"></div>
</div>
javascript javascript-events angularjs angularjs-ng-click jqlite
推荐指数
解决办法
查看次数
angularjs slick js轮播ng-click不使用响应属性设置触发
我正在使用角度包装器https://github.com/vasyabigi/angular-slick来使用光滑的滑块。
我在各个幻灯片上都有一个ng-click设置，单击后会将用户带到其他页面。我使用响应式属性设置。
首次使用滑块加载视图时，一切正常。我可以单击超链接并接收click事件。但是，如果我更改触发断点设置之一的浏览器窗口的大小，则不再触发ng-click事件。
我认为问题与到达断点时，slick框架在幕后进行的销毁和重绘逻辑有关。
在遇到响应断点后，如何重新初始化angular以观察ng-click事件？
http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd
风景：
<h2>Single Item</h2>
<slick class="slider single-item" data="this" current-index="index" responsive="breakpoints" slides-to-show=3 slides-to-scroll=3>
<div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
<h3>{{ i }}</h3>
<a ng-click="clickTheThing(i)" style="color:blue;">Click Here</a>
</div>
<p>Current index: {{ index }}</p>
</slick>
控制器：
$timeout(function () {
return $scope.awesomeThings = ['HTML5', 'AngularJS', 'Karma', 'Slick', 'Bower', 'Coffee'];
}, 1000);
$scope.clickTheThing = function(theIndex) {
console.log('clicked index' + theIndex);
alert('clicked index' + theIndex);
}
return $scope.breakpoints = [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, …推荐指数
解决办法
查看次数
使用angularjs,我如何触发点击,还是有更好的方法？
我正在使用AngularJS创建表单向导.
想想每个字段集如下:
<div ng-controller="MyController as fs">
<fieldset>
...
<button ng-click="fs.StepForward($event)">Next</button>
</fieldset>
<fieldset>
...
<button ng-click="fs.StepBackward($event)">Previous</button>
<button ng-click="fs.StepForward($event)">Next</button>
</fieldset>
</div>
我所做的是,在我的控制器中找到了当前的字段集和下一个字段集,如下所示:
app.controller("MyController", function() {
var ft = this;
ft.StepForward = function(event) {
// It's here that I need to find the fieldset
ft.current_fs = event.currentTarget.parentNode;
ft.next_fs = event.currentTarget.parentNode.nextElementSibling;
}
});
首先,我不确定这是否是绝对最好的方法,但它确实有效.
至于我的主要问题...在其中一个字段集中,我有一些li元素,如果单击某些元素,我想自动触发单击NEXT按钮.
我尝试添加ng-click:
<fieldset>
<ul>
<li><a ng-click="fs.TriggerClick($event)">Some Itme</a></li>
</ul>
<button id="MyButtonTest" ng-click="fs.StepForward($event)">Next</button>
</fieldset>
app.controller("MyController", function() {
var ft = this;
ft.StepForward = function(event) {
// It's here …推荐指数
解决办法
查看次数
角度范围和ng-click/ng-show设置多个div
我正在寻找一些我迄今为止的代码的帮助.
主要目标是能够点击任何加号图标并让它覆盖所有其他div块.
当点击加号图标时,它也会在右侧显示一个div块.
正如您将看到单击块2时所做的那样.
当点击任何加号图标时,我正在寻找一种有效的方法来使用Angular.
这只是我在这里展示的一个小样本,实际上可以覆盖10到20个块.
如果有人能够在这里看到使用更少代码的方法并更好地利用范围,那将非常感激.
试过这个,但它不想工作......
data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"
如果我不得不使用这种类型的选项,甚至说10块,那将是一个真正的混乱.
主要问题
是否有更好的Angular方式可以使用...当点击任何加号图标时,它会更改范围,然后由ngclass和ng-show使用？
如何正确连接此示例的范围？
非常感谢.
这是Avijit Gupta的最终工作示例.
<div class="container" ng-app="plusMinusApp" ng-controller="plusMinusController">
<div class="row" ng-init="value1 = 'off'">
<!--<div class="col-xs-4" data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"> -->
<div class="col-sm-4 col-xs-6" data-ng-class="{coverThisBlock: value2 == 'off'}">
<div class="divClass"
data-ng-click="(selectBlock(1)) ; (status1 = !status1) ; (value1 = { 'on': 'off', 'off':'on'}[value1])"
data-ng-class="{'active-selection': …angularjs angularjs-scope angularjs-ng-click ng-show ng-class
推荐指数
解决办法
查看次数
ng-click不在离子侧菜单中的离子项上工作
我有一个幻灯片进/出面板.除了之外,一切都对我很好Logout.请查看侧面板视图.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<!-- -->
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- -->
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Angular Social</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/dashboard">
<i class="icon ion-home"></i>
Dashboard
</ion-item>
<ion-item menu-close href="#/app/friends">
<i class="icon ion-person-stalker"></i>
Friends
</ion-item>
<ion-item menu-close href="#/app/settings">
<i class="icon ion-gear-a"></i>
Settings
</ion-item>
<ion-item menu-close href="#/app/search">
<i class="icon ion-search"></i>
Search
</ion-item>
<ion-item menu-close ng-click="ac.logout()">
<i class="icon ion-log-out"></i>
Logout
</ion-item>
</ion-list>
</ion-content> …推荐指数
解决办法
查看次数
如何在具有隔离范围的指令上使用 ng-click？
当作用域是在指令上继承时，我可以让 ng-click 工作，但在隔离时不能。 UPDATE: The point is that I want the click function to be defined as part of the directive... moving the function definition into a different scope is not what I want.
这是具有继承范围的工作示例：https : //codepen.io/anon/pen/PGBQvj
这是具有隔离范围的破碎示例； https://codepen.io/anon/pen/jrpkjp
（单击数字，它们在第一个示例中递增，但在第二个示例中不递增）
一些代码...
HTML
<div ng-app="myApp" ng-controller="baseController">
<my-directive ng-click="hello()" current="current"></my-directive>
</div>
具有继承范围的指令：
angular.module('myApp', [])
.controller('baseController', function($scope) {
$scope.current = 1;
})
.directive('myDirective', function() {
return {
link: function(scope, element, attrs) {
scope.hello = function() {
scope.current++
};
},
replace: true,
scope: …推荐指数
解决办法
查看次数
ng-repeat内的按钮可以更新表单中的输入
我想要做的是从ng-repeat中更新输入字段.我为每个用户点击ng-repeat内的按钮.单击按钮时,它应更新输入字段的值,该字段位于ng-repeat之外但在同一控制器中.我刚刚开始使用Angularjs,我似乎在这里缺少一些简单的东西,但是无法理解它.任何帮助是极大的赞赏!
<div ng-app="MyApp">
<div ng-controller="Main">
<form name="myForm">
<input type="email" ng-model="rootFolders">
<button type="submit">Submit</button>
</form>
<span ng-repeat="user in users" style="float:left">
{{user.name}}<br>
<button ng-click="rootFolders='{{user.login}}'">Load Email</button>
</span>
</div>
</div>
调节器
angular.module('MyApp', []);
function Main($scope) {
$scope.rootFolders = 'bob@go.com';
$scope.users = [
{id:0,name:'user1',login:'user1@go.com',password:'123456'},
{id:1,name:'user2',login:'user2@go.com',password:'123456'},
]
}
这是小提琴:http://jsfiddle.net/DahDC/
推荐指数
解决办法
查看次数
标签 统计
angularjs ×10
javascript ×2
ionic ×1
jqlite ×1
ng-class ×1
ng-show ×1
required ×1
slick ×1
validation ×1