标签: angularjs-ng-click

我在最新的Chrome版本和Chrome金丝雀中使用Ionic,因为一些非常奇怪的原因右键单击原因ng-click触发.

Code Pen演示了这个问题

任何人都能摆脱一些光明吗？

我正在使用AngularJS,我想在ng-click选择一个datalist(html5)的元素时使用该指令.

以下是我的实际代码示例:

<label>Search</label>
<input type="text" class="input-search" list="datalistcit" ng-change="changeQuery(queryCity)" ng-model="queryCity" />
<datalist id="datalistcit">
   <option ng-repeat="city in cities" ng-click="goCity(city)" value="{{city.name}}">
   </option>
</datalist>

它不起作用,永远不执行js方法goCity ..任何想法？

有没有办法动态更改ng-click调用的方法？

像这样的东西:

ng-click = "{{functionCalled}}"

然后通过以下方式声明函数:

$scope.functionCalled = "callThisFunction(param)";

我在Angularjs中创建Web应用程序我在单独的.js文件中编写代码,用于从数据库登录是在页面加载时执行但在按钮点击时不触发,我的.js代码是:

var adminModule = angular.module('angApp', []);
//Defining a Angular Controller
adminModule.controller('AdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        Login();
        function Login(U_Name, U_PWD) {
            debugger;
            //Defining the $http service for login the admin user
            $http({
                method: 'POST',
                url: '/Admin/IsAuthenticate',
                data: { User_Name: U_Name, User_PWD: U_PWD }
            }).success(function (result) {

                if (result == true) {
                    alert('user is valid');
                }
                else {
                    alert('unauthorised access!');
                }
            }).error(function (error) {
                //Showing error message 
                $scope.status = 'Unable to connect' + error.message;
            });
        }
    }]);

我在这里使用Angularjs来解决这个问题的观点是一个问题,上面的代码正在处理页面加载,但不能在按钮点击上工作,我使用的代码是:

<div class="admin-login" …

在Angular应用程序中,我有一个需要具有以下行为的超链接列表:

• 如果存在某种条件(例如,如果某个cookie的值为x),则单击超链接应该打开一个模态窗口;

• 如果不满足此条件(例如,如果cookie具有值y),则超链接应以其通常的方式操作并在新选项卡中打开链接.

超链接的格式如下:

<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
  {{article.title}}
</a>

我对如何实现这样的行为感到困惑.如果我离开都ng-href和ngclick指令,然后ng-href将插入网址和每次点击都会在新标签中打开一个页面.如果我删除该ng-href指令,那么在另一个选项卡中打开链接的唯一方法是通过javascript,但大多数浏览器都会阻止这种情况.我想不出ng-href有条件的方法(例如,写作<a ng-href="myCondition === true ? {{article.url}} : '#'">不起作用).

能否请您介绍一下如何在Angular中实现这样的功能？

我已经使用ng-click了div,它按预期工作,但是当我使用ng-blur其他一些输入时,ng-clickdiv上的工作停止了.

工作代码[点击时调用addItem(item)]

 <div ng-controller="TestController">
  <input type="text" ng-focus="show=true">
  <div ng-show="show" class="choosecont">
    Choose from selected
    <div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
  </div>
  <div class="chosencont">
    Following are selected
    <div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
  </div>
</div>

破解的代码[addItem(item)未被调用]

 <div ng-controller="TestController">
  <input type="text" ng-focus="show=true" ng-blur="show=false">
  <div ng-show="show" class="choosecont">
    Choose from selected
    <div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
  </div>
  <div class="chosencont">
    Following are selected
    <div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
  </div>
</div>

相关的JS代码

angular.module("myApp", [])
.controller("TestController", ["$scope", function($scope) {
  $scope.allItems = ["A", …

我正在尝试将输入字段中的值绑定到ng-click上的方法参数.这是我得到的,但它不起作用,我不太确定是否可以这样做？:

<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>


$scope.getById = function (id) {
        console.log(id);
        return $http.get('/api/Post/' + id);
    }

在我的控制器中:

$scope.homeAction = function() {
  console.log("HomeAction");
};

在我看来:

<button ng-click="homeAction()">call homeAction()</button>

单击按钮时,Chrome和Firefox会按预期执行该方法,但IE会执行两次.知道为什么吗？

这是一个再现问题的plunker:http://plnkr.co/edit/pedZKjIVGDAYfMl0ZphJ .

当我单击其中包含输入的标签时,Agnular的ng-click会触发两次.我试过$event.stopPropagation();但没有用,怎么解决这个问题？

我也检查了这个问题: 标签上的Angular.js ng-click事件被触发两次

<div class="list-group-item" ng-repeat="item in model.data">
  <form role="form" name="selectForm" novalidate>
    <label ng-click="$event.stopPropagation(); updateSelected();">
      <input type="checkbox" ng-model="chechkedSkins[item.id]" />
      <span>{{item.name}}</span>
    </label>
  </form>
</div>

<ion-view>
	<div class="bar bar-header bar-dark">
		<h1 class="title">Welcome</h1>
	</div>
	<ion-content class="has-header">
		<form ng-submit="doLogin()">
			<div class="list">
				<label class="item item-input">
					<span class="input-label">???</span>
					<input type="text" ng-model="phonenumber" placeholder="???????" maxlength="11">
					<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">?????</button>
				</label>
				<label class="item item-input">
					<span class="input-label">???</span>
					<input type="password" ng-model="verifycode">
				</label>
				<label class="item">
					<button class="button button-block button-dark" ng-click="getVerifyCode(111)">? ?</button>
				</label>
			</div>
		</form>
	</ion-content>
</ion-view>

1. 为什么标签标签内的按钮(获取验证码)不起作用？

2. 但按钮(登陆)外面的标签标签工作正常,为什么？

3. 请帮我解决这个问题.我点击按钮时需要做出回应(获取验证码)