FAQ Database Discussion Community


AngularJs - Send data in ng-click to validate email

angularjs,angularjs-ng-click
I'm trying to check if the inserted email is in a valid format so I can choose what to do next. I'm trying to achieve this by sending myForm.$valid value inside the function that runs when the user hits the button to submit the email. Here is how I'm trying...

Angular js form submits when it shouldn't

javascript,angularjs,angularjs-ng-click,ng-submit
I have an AngularJS form which looks like this: <form ng-submit="vm.update(vm.model)"> .. fields <button ng-click="vm.addCluster()">Add</button> .. more fields <input type="submit" value="Save" /> </form> When I click submit it works as expected - update() method is called. When I click the button it calls addCluster() but after that the form gets...

Angular.js change location ng-click

javascript,angularjs,angularjs-ng-click
I've read some other posts on the same topic but cannot get my own to work. Basically, I want the location of my app to change on a ng-click event. So I have html code that looks like this: <button class="button icon-left ion-plus-round button-block button-calm" ng-click="send({{foods.cal}})"> Add Calories </button> And...

How to fix this ng-class toggle comparison?

javascript,angularjs,angularjs-ng-repeat,angularjs-ng-click,angularjs-ng-class
http://plnkr.co/edit/7v63GXSIDon1QKm1GXCE?p=preview I have an array which stores the name of each button that is clicked. Once clicked the object is placed into array, I use ng-class to check if the name of the object in the array is the same as the model used to create the button. Then if...

How to call ng-repeat sort by predicate code from Controller?

javascript,angularjs,angularjs-ng-repeat,angularjs-ng-click
I have 2 directives, 1 controls the view for a list of tags and contains a couple of sort buttons and the other a popover menu with the same options: Markup for tagPanel: <header> <ul> <li ng-class="{'active':vol}" ng-click="vol = true; predicate = 'week_quantity'; reverse=!reverse">Vol</li> <li ng-class="{'active':!vol}" ng-click="vol = false; predicate...

How to prevent a ng-click event on a div in a sub controller from triggering an ng-click in the root?

javascript,angularjs,angularjs-scope,angularjs-ng-click
http://plnkr.co/edit/gB7MtVOOHH0FBJYa6P8t?p=preview I have a parent child controller example above, in the child when a button is clicked I displays the div showPop and then will $emit an event upwards to the $rootScope. Now in the parent / $rootScope I "hear" that event then activate another function. That function in the...

How to print (on ng-click) an item of a ng-repeat outside the loop?

angularjs,angularjs-ng-click
I have a simple array of objects {name,age} (see my jsfiddle). I use an ng-repeat to print all the names and I would like to print, outside the ng-repeat loop, the age of the name on which I click. <body ng-app="myapp"> <div ng-controller="MyController" > <ul> <li ng-repeat="friend in myData.friends" ng-click="myData.doClick($index)">{{friend.name}}</li>...

ng-click value change + $scope.watch bind not working properly

javascript,angularjs,angularjs-scope,angularjs-ng-click,angularjs-watch
I have a scope variable '$scope.searchType' which is equal to 'createdAt' by default. In my HTML I have options that change the scope variable value: <ul class="dropdown-menu" role="menu"> <li><a ng-click="searchType = 'Anything'">Anything</a></li> <li><a ng-click="searchType = 'Payment'">Payment</a></li> <li><a ng-click="searchType = 'Total'">Total</a></li> <li><a ng-click="searchType = 'Tax'">Tax</a></li> <li><a...

AngularJS - stop ng-click expression evaluation after $event.stopPropagation

javascript,angularjs,events,angularjs-ng-click
I'm struggling stoping ng-click from evaluating the rest of expression after event cancelation was called. I've made the following plnkr. If you click on "Click me" text, you'll see that the value is changing, although the clickMe function is calling all known methods (by me, at least) to stop the...

ng-click not working in ion-scroll even when all $scope variables are in an object

angularjs,ionic-framework,angularjs-ng-click
I have created a plnkr for this problem. I can't get the ng-click to work on this page. I thought I could solve this issue, with the answers I got from this question: Why do I need $parent to enable the function in ng-click when using ion-scroll? But even when...

append a html include ng-click in angularjs

angularjs,angularjs-ng-click
i have this code in mycontroller i will add this html() to my html, all it right just ng-click dos not work ! have you an ideas why ng-click dos not work var html='<div ng-click="selectedValue('+Value+')">Value</div>' ; $('#myDiv').html(html); $scope.selectedValue = function(value){ $scope.val =value; }; i have to slect the value displayed...

How to display an image or pdf file on new tab in angular js?

javascript,asp.net-mvc,angularjs,angularjs-ng-click
Below is my page: Now when i click on Capture1.png i want to first display that image on new tab without any pop up as shown in my above picture. Same way when i click on sample.pdf i want to first display pdf on new tab. This is my html:...

How to trigger ng-click inside ng-repeat angularJS

angularjs,angularjs-scope,angularjs-ng-repeat,angularjs-ng-click
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called. html <div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">...

Angular fire ng-click on row but not on href

html,angularjs,twitter-bootstrap,events,angularjs-ng-click
I've made a page with bootstrap, and i would like to have an action when the user clicks on the row. This is easy, I put ng-click on the div that is the row. However, inside the row elements I've a link, and I would like to avoid the firing...

Angular: Use ng-click to auto fill/change data stored inside ng-grid

javascript,angularjs,ng-grid,angularjs-ng-click
I am new to angular. I have a simple page with a ng-grid that displays days and times. The idea is a driver is on the page and can click for each time slot whether his is available at the time to volunteer driving (Y, or N). Currently you can...

Ng-click - does the order matter when calling multiple methods?

javascript,angularjs,angularjs-ng-click
When calling multiple methods with ng-click, as in ng-click="select(); highlight()" do they get executed in order, i.e. first select() and then highlight()?...

angular: calling a function with parameter using ng-click inside directive template

angularjs,angularjs-directive,angularjs-ng-click
new to angular here :) I have a custom directive that have an ng-click in it which calls a function I have defined in a controller (not the directive controller). This is the html view: <course-pass course-id="bla"/> This is the directive: scotchApp.directive("coursePass", function($compile) { return { restrict: "E", controller: 'dropdownCtrl',...

Method display on the scope is not executed

angularjs,angularjs-scope,angularjs-ng-click,angularjs-ng-show
I have a set of directives that share a scope Update: The code is available as a plunk here http://plnkr.co/edit/JZ77bsZgGrw6N4K718Is?p=preview todo-item: app.directive("todoItem",function(DeleteTodo,$log){ var dirDefObj = { restrict:'E', templateUrl:'app/templates/todo.html', scope:{ todo:'=value' }, controller:function($scope){}, replace:true }; return dirDefObj; }); template: <div class="ui card"> <todo-formui ng-show="todo.editMode"></todo-formui> <todo-cardui ng-show="!todo.editMode"></todo-cardui>...

Function in AngularJS controller not being called

angularjs,angularjs-controller,angularjs-ng-click
I am trying to call a function from my AngularJS controller with the following code: Controller Code (function () { var hello = angular.module("helloApp", []); hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) { console.log("in controller"); $scope.test = function() { console.log("in test function"); $http.get("/test").success(function(data) { console.log("success"); }) .error(function(data) { console.log("error"); }); }; }...

ng-repeat with ng-click inside a directive

angularjs,angularjs-directive,angularjs-scope,ng-repeat,angularjs-ng-click
I am trying to create a simple autocomplete tag directive. But the ng-click on the dropdown menu <li> won't fire. I am sure this is some sort of scope issue, but I don't get why. Can someone please show me how to get this ng-click to fire? thanks! here is...

ng-click used inside ng-grid

angularjs,ng-grid,angularjs-ng-click
I'm hoping you can help me figure out how to merge my ng-click event into my code. I've been trying to figure it out all weekend. I found this ng-click event jsfiddle: http://jsfiddle.net/nisham/09k8f5s4/97/ that I want to use inside my project. I want users to be able to see the...

How to correctly watch for clicks outside an element?

javascript,angularjs,angularjs-ng-click,ng-show
When I click on "Add New Item" button I want a popup form to be displayed. Then if I click outside this form I want it to hide itself. To show/hide form I use ng-show directive. To watch for outside clicks I use third-party Angular directive angular-clickout But there is...

Changing scope variable on ng-click without calling a function

javascript,angularjs,operators,angularjs-ng-click,angular-ng-if
How can I change a Scope Variable without calling a function from controller. I'm trying to show a div content when the editState variable equals to 1 but it's not working. HTML <body data-ng-controller="profileCtrl as pctrl"> <div data-ng-click="pctrl.editState === 1">Edit</div> <div data-ng-if="pctrl.editState === 1"> ..... </div> </body> JS(in profileCtrl controller)...

ng-click / ng-class combination not working as expected with $index

angularjs,angularjs-ng-click,ng-class
For some reason my ng-click / ng-class combination is not working. On click the class 'hide' has to be added based on the equality of the productDisplay variable. <div ng-repeat="product in project.data track by $index"> <p ng-click="productDisplay = $index"><strong>{{product.name}}</strong></p> <div class="fileList" ng-class="{'hide': productDisplay !== $index}">{{$index}}</div> I can click on the...

AngularJS - Filter view by month with ng-click

angularjs,date,filter,angularjs-ng-click
I would like to filter my view with a simple link. I have several objects which all contain a date. Eg. If I click March only data with "Startdate" March should be displayed. I searched the web but found nothing which worked for me. This is my json object and...

Using ng-click inside np-repeat

angularjs,angularjs-scope,angularjs-ng-repeat,model-binding,angularjs-ng-click
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat. While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat....

Prevent Area Tag Page Reload on Angular Ng-Click

javascript,html,angularjs,angularjs-ng-click,event-propagation
I've got an image with an associated link map. The one area tag I have in there has an ng-click on it. Currently, when you click that ng-click, the function it links to runs, but then the page reloads. How do I prevent the page from reloading in the process?...

ng-click change class to selected button

angularjs,angularjs-ng-click,ng-class
i want to change class btn-white to btn-primary for the selected Button $scope.SelectedCombination = function (combinationId) { $scope.selectedCombination =combinationId; }; html <button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button> ...

Angularjs - ng-click function vs directive

javascript,angularjs,angularjs-directive,angularjs-ng-click
I can't decide which method to use in following case. I'm trying to alert when clicking on buttons. I can do this using 2 methods. Which is the best practice and please tell me why? Method 1 <div ng-app="app"> <button alert>directive</button> </div> var app = angular.module('app', ['ngRoute']); app .directive('alert', function(){...

With angularjs, how can I trigger a click, or is there a better way?

angularjs,angularjs-ng-click
I'm creating a form wizard with AngularJS. Think of each fieldset like so: <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> What I've done is, in my controller found the current fieldset and the next fieldset like so: app.controller("MyController",...

angular filter with ng-click + input

angularjs,filter,angularjs-ng-repeat,angularjs-ng-click
how can I get a filter with ng-click out of an ul as second filter for an ngtable? <ul class="artGroups"> <li class="" ng-repeat="artGroup in artGroups"> <a href="#" ng-click="">{{artGroup.artGroupName}}</a> </li> </ul> Here's a plnkr: http://plnkr.co/edit/Amdx2BzEWQWVYmRAgTMw...

Disable ng-click from outside element on link inside

javascript,angularjs,angular-ui-router,angularjs-ng-click
I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked. <div ng-click="click()" style="background: #d3d3d3"> <a ui-sref="about">go to about page</a> </div>...

How I can delegate a click event in angular?

angularjs,delegates,angularjs-ng-click,angular-directive
How can delegate a click event on my board, what I do is I tell element to find element with the class open-preview And I can not do it like I do. Because the li is created dynamically in ruby loop. I do not know how I can delegate a...

Angular ng-repeat $index

javascript,html,angularjs,angularjs-ng-repeat,angularjs-ng-click
I'm creating a list of items the user can click to go to the next picture. <ol class="indicators"> <li ng-repeat="img in pics" ng-click="slideTo($index)"></li> </ol> this code works but the problem is that it doesnt fill in the $index in the ngClick directive. This is the resulting html: <li ng-repeat="img in...

How to mark a radio button as checked in Angular with ng-click / ng-change?

javascript,angularjs,angularjs-ng-click
http://plnkr.co/edit/rXWUUjLtJi79z2hF1uVX?p=preview I have a very simple plnkr, basically when the li elements are clicked I want the radio buttons checked. How is this accomplished below? Right now no radio gets selected. If I remove the ng-click, then the user can just click the radio buttons, but I also want the...

ngClick for only “this” element in list | AngularJS

angularjs,angularjs-ng-click
I have a list of users where by if the user clicks on a "edit" icon next to each person name, they have options appear. I'm wanting to make it so that the user can only edit one person at a time and not edit lets say, two or more...

Use ng-click to show the right article using ng-show and ng-repeat

angularjs,angularjs-ng-repeat,angularjs-ng-click,angularjs-ng-show
The following happens in the same controller. I have a page that shows a list of article titles. If the user clicks on an article title a popup will show the article in detail. The article titles are generated by a ng-repeat. <div class="adItem" ng-click="showArticle = tiki._id" ng-repeat="tiki in tikis...

After changing my List vom ng-repeat to collection-repeat ng-click is not working properly

javascript,angularjs,ionic-framework,ionic,angularjs-ng-click
I had a List like this: <ion-item ng-repeat="item in items" ng-click="itemClick({{item[0]}})"> ... </ion-item> now I changed it to: <ion-item collection-repeat="item in items" ng-click="itemClick({{item[0]}})"> ... </ion-item> while having the following code in my controller: $scope.itemClick = function (index) { // index is undefined }; before making the change from ng-repeat to...

Click event on glypicon

angularjs,twitter-bootstrap-3,angularjs-ng-click
How do I add a ng-click event to a bootstrap glyphicon in a textbox? The event doesn't get fired... <body ng-app ng-init="mymodel='THIS IS MY MODEL'"> <h3>How to clear the model on remove icon click?</h3> <div class="container"> <div class="form-group has-feedback" > <input type="text" class="form-control" ng-model="mymodel"/> <i class="glyphicon glyphicon-remove form-control-feedback" ng-show="mymodel" ng-click="mymodel...

Switching between tabs in modal in angular

angularjs,twitter-bootstrap,angularjs-scope,bootstrap-modal,angularjs-ng-click
I have a login and a signup form that opens in a modal. At the top I have two tabs switching between login and signup. see picture Switching between the tabs works fine. However, I want the user to be able to choose login as well as signup on my...

Toggle class between two buttons in Angular but restrict to prevent same button from changing class

javascript,angularjs,angularjs-ng-click,ng-class
Trying to create some very basic functionality which basically makes two buttons behave like radio buttons. Have two buttons that are used to show/hide different content based on what is shown. So it is working as expected except for it is changing on any click. So if I click the...

Angular interpolate scope variable in ng-click

angularjs,angularjs-ng-click
How do I construct the name of a scope variable in ng-click. E.g the I have a form in ng-repeat where the name is generated dynamically. I am using x-editable plugin so name in this case will create a scope variable called {{box.key}}{{$index}} <div ng-repeat="course in box.value track by $index">...

Can I set a variable inside ng-repeat?

javascript,html,angularjs,angularjs-ng-repeat,angularjs-ng-click
I have an application that has two forms that are lists of buttons and a form with a list of labels. I choose a person, choose a phone, and on the third form I show a list of phones and their associated people (location). Is it possible to set a...

ng-click first apply class, then execute function

angularjs,function,angularjs-ng-repeat,angularjs-ng-click,delayed-execution
I have a shopping cart (a rootScope array) which gets turned into a list of items in it, including a button to delete that item from the cart array (the red X). I don't have enough reputation to add an image, so here's a link to what it looks like...

ng-click on current tag

css,angularjs,background,angularjs-ng-click
I have general container which is full screen background and inside it i have small div with content. In general container i have ng-click which activated when i click on small div. How can i disable that? <div class="generalContainer" ng-click="onlyBackground()"> <div class="smallDiv">Content</div> </div> I have tried to add z-index on...

AngularJs ng-click not working directive

javascript,html,angularjs,angularjs-directive,angularjs-ng-click
When I click on my HTML img, ng-click doesn't work. I don't understand why. This error happens in masonryPictureView.html Main page - home.html <ng-masonry> <ng-picture ng-items="projectdescription.pictures"></ng-picture> </ng-masonry> Template of directive ngPicture - masonryPictureView.html <ul class="grille"> <li ng-repeat="item in ngItems"> <img ng-click="test()" src="{{item.img}}"/> <------ NG-CLICK </li> </ul> Directive in home.html app.directive('ngMasonry',...

Change selected