Acutally I am learning angularjs. I've introduced a problem is that when I click ng-click, ng-model is not updating. My code is as follows,
<div ng-repeat="product in cart">
<input type="number" ng-model="product.quantity" ng-required class="input-sm">
<button class="btn btn-xs" type="button" ng-click="product.quantity++">+</button>
<button class="btn btn-xs" type="button" ng-click="product.quantity--">-</button>
</div>
try like this
<button type="button" ng-click="product.quantity = product.quantity+1">+</button>
<button type="button" ng-click="product.quantity = product.quantity -1">-</button>
Try This
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp">
<div ng-controller="mainCtrl">
<input type="number" ng-model="product.quantity" ng-required class="input-sm">
<button class="btn btn-xs" type="button" ng-click="product.quantity = (product.quantity +1)">+</button>
<button class="btn btn-xs" type="button" ng-click="product.quantity = (product.quantity -1)">-</button>
</div>
</div>
Related
I'm trying to save form data in mdDialog but with options of (save and close) the dialog and (save) which will save the form data then open another dialog empty dialog without having to close and open the mdDialog again, the problem is how to call same SaveData function in same form for both save operations?
$scope.saveData = function (isValid) {
if (isValid) {
updateservice.postdata($scope.myformdata)
.then(function (data) {
$mdDialog.hide();
});
// error handling
}
};
and in the template:
<md-dialog>
<form name="form" ng-submit="saveData(form.$validform)" novalidate>
<md-dialog-content>
<div class="md-dialog-content">
<div>
</div>
<table class="table display" border="1" span="1" name="newForm" novalidate role="form" ng-style="{ width: th.width }">
</tr>
<tr>
<td><input type="text" class="form-control text-center" placeholder="required" ng-required="true"></td>
<td><input type="text" class="form-control text-center" placeholder="optional" ng-required="true"></td>
</tr>
</table>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-progress-circular md-mode="indeterminate" md-diameter="20px" class="spinner"></md-progress-circular>
<button type="button" class="btn btn-primary" ng-click="save()" >Save</button>
<button type="submit" class="btn btn-primar">Save and close</button>
<button type="button" class="btn btn-default" ng-click="cancel()" ng-disabled="loading">Cancel</button>
</md-dialog-actions>
</form>
</md-dialog>
I changed Save button with type button is not posting the formdata, and changing type to submit like save and close saves data then opens and closes the dialog.
here's codePen with my code:
https://codepen.io/anon/pen/ZqoYRx
How about passing an argument like isSaveAndClose in the save function:
In HTML:
<button type="button" class="btn btn-primary" ng-click="save(false)" ng-show="!loading">Save</button>
<button type="button" class="btn btn-primar" ng-click="save(true)">Save and close</button>
In JS:
$scope.save = function (isSaveAndClose) {
saveData();
if (isSaveAndClose)
$mdDialog.hide().then(showCustomConfirm);
};
I'm working on something where you have a reset button, a button to save changes to a database object, and I added a delete button next to it. No matter what I do, I can't seem to find how to get the two different buttons to call different functions. I'm very new at this...
Here's the HTML part.
<fieldset>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary">Save Changes / Create</button>
<button type="remove" value="Remove" ng-model="deleteProduct()" class="btn btn-primary">Delete</button>
</div>
</div>
</fieldset>
The ng-model part I added doesn't seem to do anything. No matter what I do, I can't get it to call a different function to the Save button. *
*Disclaimer I took over this project and didn't write it from scratch. I've tried crawling through the code and adding things everywhere (with console.log lines added in to see if they ever get called) but I can't seem to crack it. Does anyone have any ideas?
You can use ng-click to assign a click listener in Angular.
<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary" ng-click="submit()">Save Changes / Create</button>
In your controller find these functions to perform specific operations that you need.
$scope.submit = function() {
console.log("Submit button clicked");
}
$scope.cancel = function() {
console.log("Cancell button clicked");
}
Try ng-click for function call use like
<button ng-click="myFunc()">OK</button>
Some corrections need to be made in your code :
It should be ng-disabled instead of ng-disabeled.
type="remove" is not valid type of the element. Use type="button" with ng-click="remove()"
Working code :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.cancel = function() {
console.log("cancel call");
}
$scope.save = function() {
console.log("save call");
}
$scope.remove = function() {
console.log("remove call");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm">
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" value="Submit" ng-disabled="myForm.$invalid" class="btn btn-primary" ng-click="save()">Save Changes / Create</button>
<input type="button" value="Remove" ng-click="remove()" class="btn btn-primary"/>
</div>
</div>
</form>
</div>
Can you please let me know how I can show and Hide an element in angular? in following example I want to initially hide the #item-details and show it if check box checked or Hide if un-check
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
var app = angular.module('app', [])
.controller('checkController', function() { });
this.
});
</script>
</body>
</html>
First assign an model to the check box
<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>
then simply assign the same model value to item-details in ng-show
<div class="col-md-6" id="item-details" ng-show="checked">
you are done
Example
var app = angular.module('app', []);
app.controller('checkController', function($scope) {
$scope.hide = false;
$scope.checkboxClick = function() {
$scope.hide = !$scope.hide;
};
});
HTML:
<body ng-app="app">
<div ng-controller="checkController" class="container">
<div class="row">
<div class="col-md-2">
<input type="checkbox" ng-click="checkboxClick()" value="new" name="item" /> Add New Item
<br />
</div>
<div ng-show="hide" id="item-details" class="col-md-6">
<div aria-label="..." role="group" class="btn-group">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</div>
</div>
</body>
In one way or the other, the ng-show is not working but I use the ng-if as a work around which work perfectly.
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" ng-model="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-if="item == true">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
hope is helps thanks.
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" ngmodel="checked" ngchecked="checked == '1'"/>Add New Item <br /></div>
<div class="col-md-6" id="item-details" ngshow = "checked == '1'">
<div class="btn-gr`enter code here`oup" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
Just do above
I using angularjs bootstrap modal, and i want to validate form before submit, so i use required in input tag like this:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<div class="modal-body">
<form id="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
but it doesn't work, what is the problem?
Trying adding a name to the form. productForm.$invalid refers to the name of the form. Towards the bottom of the docs there are some examples.
EDIT: I would also move the buttons into the form
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<form name="productForm" novalidate>
<div class="modal-body">
<form id="productForm" name="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
There seems to be a problem converting ui.bootstrap.buttons to be used with ng-repeat. The ui.bootstrap.buttons example and documentation is here: http://angular-ui.github.io/bootstrap/
Bascially the default example works nicely: http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa?p=preview
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
But when it's converted the use ng-repeat, it breaks: http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V?p=preview
<div class="btn-group">
<label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>
Try
<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">
instead of
btn-radio="'{{test}}'"
On top of this ng-repeat is creating a new scope so you need to account for this as well. Here is a working plunk: http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM?p=preview
In the end after some testing I got it working using ng-class for initial selected value and own ng-click handler that changes the selected button
HTML-code for the buttons:
<div class="btn-group">
<button ng-repeat="(timelineIndex, timeline) in timelines" ng-click="selectTimeline(timeline)" ng-class="{active: timeline.name === selectedTimeline.name}" class="btn btn-primary">
{{timeline.name}}
</button>
</div>
in controller:
$scope.selectTimeline = function(activeTimeline) {
$scope.selectedTimeline = activeTimeline;
};