AngularJS Simple click counter not working - angularjs

I'm trying to build a counter functionality. I'm using AngularJS with Bootstrap button group and I'm not sure where the conflict is. Below is my code. Can someone please help?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<div ng-app="meetingDetail" ng-controller="meetingDetailCtrl">
<div class="col-md-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-sm">
<input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vYes" autocomplete="off">Yes
</label>
<label class="btn btn-warning btn-sm">
<input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vNo" autocomplete="off"> No
</label>
<label class="btn btn-info btn-sm">
<input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vAbstain" autocomplete="off"> Abstain
</label>
</div>
{{yesCount}}
</div>
<script>
var app = angular.module('meetingDetail', []);
app.controller('meetingDetailCtrl', function($scope) {
$scope.yesCount= 0;
});
</script>
</body>
</html>


Radio buttons don't have click event.
Put click event on label instead of radio button
Like this
<label ng-click = "yesCount = yesCount+1" class="btn btn-info btn-sm">
<input type="radio" name="radioSecondBy" id="vAbstain" autocomplete="off"> Abstain
</label>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div ng-app="meetingDetail" ng-controller="meetingDetailCtrl">
<div class="col-md-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-sm" ng-click = "yesCount = yesCount+1">
<input type="radio" name="radioSecondBy" id="vYes" autocomplete="off">Yes
</label>
<label class="btn btn-warning btn-sm" ng-click = "yesCount = yesCount+1" >
<input type="radio" name="radioSecondBy" id="vNo" autocomplete="off"> No
</label>
<label ng-click = "yesCount = yesCount+1" class="btn btn-info btn-sm">
<input type="radio" name="radioSecondBy" id="vAbstain" autocomplete="off"> Abstain
</label>
</div>
{{yesCount}}
</div>
</div>
<script>
var app = angular.module('meetingDetail', []);
app.controller('meetingDetailCtrl', function($scope) {
$scope.yesCount= 0;
});
</script>
</body>
</html>


ng-click does not work on radio buttons. You can use either ng-change or watch the variable
1) ng-change
<input type="radio" name="radioSecondBy" ng-change= "yesCount = yesCount+1" id="vYes" autocomplete="off">Yes
2) $watch
$scope.$watch('yesCount', function(value) {
$scope.yesCount = $scope.yesCount + 1;
});
here is the similar question

Related

Controller Value is not showing in view Angularjs

In the view {{phonenumber}} value is not updating. But When I enter digits alert is working properly inside the controller.
Controller
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
});
View
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">\
<input type="text" id="cliente" class="form-control" value="{{phonenumber}}">
</div>
</div>
</div>

Some observations :
remove unecessary multiple ng-controller="PosController" and ng-app="myApp" from the code and leave with only one at the top.
use ng-model="phonenumber" instead of value="{{phonenumber}}" to perform two way data binding.
Working demo :
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<input type="text" id="phonenumber" class="form-control" ng-model="phonenumber"/>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumber)">Cliente</button>
</div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
</div>

There are several things you're missing. First of the all, as suggested in comment, you only need to declare ng-app and ng-controller once in the HTML with np-app on the top-most level. Secondly, you bind the scope data to the HTML using ng-model inside a input field, or {{phonenumber}} in HTML. Third, you forgot to close the controller with an ending parenthesis.
Here is a working demo:
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="panel" >
<div class="input-group col-xs-4" ng-controller="PosController">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div>
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
<span>Phone#: {{phonenumber}}</span>
<div>
Dial: <input type="text" id="cliente" class="form-control" ng-model="phonenumberFromDial">
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumberFromDial)">Update phone#</button>
</div><!-- /btn-group -->
</div>
</div>
</body>
</html>

Disable the buttons inside div using ng-disabled

I have a div which has many buttons and a main button. I want to disable whole div once main button is clicked. Something like following
<body ng-app>
<div ng-disabled="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</div>
</body>

Couple of options include:
Using fieldset instead of div:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
<fieldset ng-disabled="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</fieldset >
</body>
Manually disabling:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.disable = function(evt) {
angular.element(evt.target.parentNode).children().attr('disabled', true);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app' ng-controller="myController">
<div>
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disable($event)">
</div>
</body>
ng-disabled on each element
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
<div>
<input type="button" value="btn1" ng-disabled="disableDiv">
<input type="button" value="btn2" ng-disabled="disableDiv">
<input type="button" value="btn3" ng-disabled="disableDiv">
<input type="button" value="Main Button" ng-disabled="disableDiv" ng-click="disableDiv=true">
</div>
</body>

You can create a function in the controller and set the disabled attribute to each button:
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.btnDisabled = false;
$scope.disableDiv = function() {
$scope.btnDisabled = true;
}
});
html
<body ng-controller="MainCtrl">
<div>
<input type="button" value="btn1" ng-disabled="btnDisabled">
<input type="button" value="btn2" ng-disabled="btnDisabled">
<input type="button" value="btn3" ng-disabled="btnDisabled">
<input type="button" value="Main Button" ng-click="disableDiv()" ng-disabled="btnDisabled">
</div>
</body>
Plunker

You might want something like this:
<body ng-app>
<div ng-hide="disableDiv">
<input type="button" value="btn1" >
<input type="button" value="btn2" >
<input type="button" value="btn3" >
<input type="button" value="Main Button" ng-click="disableDiv=true">
</div>
</body>
The ng-hide directive will hide the element when its value is true.

ng-disabled works only on HTML input elements. The div element has no “disabled” attribute, that’s why it fails.
https://docs.angularjs.org/api/ng/directive/ngDisabled#usage

Button flickering on mouseover with ng-clip and ng-show/ng-hide

I'm seeing weird flickering when mousing over the ng-clip enhanced button. I've got the ng-clip enhanced button being shown/hid when the enclosing div is moused over. As the user moves the mouse over the button, it flickers. I'm assuming it's something to do with event handling between Zeroclipboard and the Angular code?
Here is a Plunker page displaying the issue: http://plnkr.co/4gFy9U
The code from Plunker:
<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl" ng-mouseover="isHovering = true" ng-mouseout="isHovering = false">
<div class="page-header">
<h1>ngClip <small>example</small></h1>
</div>
<form>
<div style="background:red;" class="form-group">
<label >Copy #1</label>
<input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
<button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
</div>
<br/><br/><br/>
<textarea class="form-control" rows="3" placeholder="paste here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider', function(ngClipProvider) {
ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
ngClipProvider.setConfig({
bubbleEvents: false
})
}]);
myapp.controller('myctrl', function ($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body >
</html>

I was also having this issue. I fixed by using ng-mouseenter on an outer div instead of using ng-mouseover and ng-mouseleave on an inner div instead of ng-mouseout. No flicker!
So:
<div ng-app="myapp" ng-mouseenter="isHovering = true">
<div class="container" ng-controller="myctrl" ng-mouseleave="isHovering = false">
<div class="page-header">
<h1>ngClip <small>example</small></h1>
</div>
<form>
<div style="background:red;" class="form-group">
<label >Copy #1</label>
<input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
<button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
</div>
<br/><br/><br/>
<textarea class="form-control" rows="3" placeholder="paste here"></textarea>
</form>
</div>
</div>

Why does ng-messages for form validation not work when using $rollbackViewValue

I have a form using ng-messages for form validation error messages. Im also using the new ng-model-options with $rollbackViewValue to rollback all changes to the form. Problem is ng-mesages will not work if I use the rollbackViewValue on the form.
I really like this new function in angular1.3 using ng-model-options to reset a form as I have not found anything that works as well as $rollbackViewValue()
Heres is the code and plunker
<!DOCTYPE html>
<html data-ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form"
data-ng-submit="vm.submit()"
data-ng-model-options="{updateOn: 'submit'}" >
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="form.$rollbackViewValue()">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
<script src="scripts.js"></script>
</body>
</html>
controller
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl',function ($scope, $rootScope) {
var vm = this;
vm.names = {
fname: "Albert",
lname: "Capone"
}
});

You would need to make the form pristine and revert back the touched state as well. You can do so by calling the special functions, $setPristine() and $setUntouched() , on the formController. But it appears rollBackViewValue works with ngSubmit, but it is only to revertback during some action, (like esc key, another button). But if the form field has contraint errors it appears it updated viewvalue to nullify the entered value. You could try this way by resetting to default field values.
In your view:-
<button type="button" class="btn btn-default"
data-ng-click="vm.reset(form)">reset</button>
In your controller:-
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue();
form.$setPristine(); //Set pristine state
form.$setUntouched(); //Set state from touched to untouched
vm.names = angular.copy(defModel); //reset model
}
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl', function($scope, $rootScope) {
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue(); //Probably can be removed
form.$setPristine();
form.$setUntouched();
vm.names = angular.copy(defModel);
}
});
<div data-ng-app="App">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form" data-ng-submit="vm.submit(form)" data-ng-model-options="{updateOn: 'submit'}">
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="vm.reset(form)">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
</div>

In Angularjs / Bootstrap why does my cancel button invoke the submit event

I have an Angular / Bootstrap form with a button type=submit and a plain button to cancel - and hide the form. When I click on the cancel, it calls the cancel event handler and then it calls the submit handler. ?? Here's the code as if have it in Plunker: http://plnkr.co/edit/Nsqy4DuVaoI04VObS2Zd?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example33-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.cancel = function(){
alert('cancelling');
}
$scope.submitNewAccountForm = function(isValid){
alert('in submit');
}
}]);
</script>
<form ng-controller="ExampleController" name="newAccountForm" ng-submit="submitNewAccountForm(newAccountForm.$valid)" class="form-horizontal" novalidate>
<fieldset>
<!-- Form Name -->
<legend>Account</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="name">Account name</label>
<div class="controls">
<input ng-model="name" id="name" name="name" type="text" placeholder="account" class="input-medium" required="">
<p class="help-block">Required.</p>
</div>
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="type">Account type</label>
<div class="controls">
<select ng-model="type" id="type" name="type" class="input-medium">
<option>client</option>
<option>provider</option>
</select>
</div>
</div>
<!-- Button (Double) -->
<div class="control-group">
<label class="control-label" for="cancelaccountadd"></label>
<div class="controls">
<button type="submit" id="doaccountadd" name="doaccountadd" class="btn btn-success">Save</button>
<button ng-click="cancel()" id="cancelaccountadd" name="cancelaccountadd" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>

On button elements, submit is the default type attribute. change that to type="button" and it will no longer call the submit event.
Plunker

Resources