I have a "clear" button, once user hit it all the data in container,all binding and the radio buttons should be reset (like initially). Currently only the view becomes empty but the container has still the old value. How can I fix it?
<div class="field">
<textarea name="price" ng-model="list.price"></textarea>
</div>
<input type="radio" ng-model="list.phone" value="1" />cell
<input type="radio" ng-model="list.phone" value="2" />home
<button class="btn btn-primary btn-large center" type="reset" ng-click="">
Clear
</button>
Set ng-click to some function, say reset()
<button class="btn btn-primary btn-large center"
type="reset"
ng-click="reset()">Clear
</button>
and then set the model to an empty object
$scope.reset = function() {
$scope.list = {};
}
Or, if $scope.list is prepopulated, you could do something like this (taken from angular docs):
function Controller($scope) {
$scope.master = {};
$scope.reset = function() {
$scope.list = angular.copy($scope.master);
};
$scope.reset();
}
Related
I need to add a button to my Form in which if I click that button it should show me a text area and a Submit button so after typing any text I will click the submit button it should print the checkbox in my form using AngularJS.
Same as in the above pic. I am new to typescript so help me to fix this
Use the ngClick directive:
<button ng-click="yourFunction()">OK</button>
https://docs.angularjs.org/api/ngTouch/directive/ngClick
Also, please read the documentation or a tutorial/example before you ask such a basic question...
<div data-ng-controller="homeController">
<div class="col-lg-1">
<span class="glyphicon glyphicon-plus-sign" style="cursor:hand" aria-hidden="true" title="Add More" ng-click="onEnable()"></span>
</div>
<div class="col-lg-5">
<input type="text" ng-if="isEnableTextBox" ng-model="model.label" name="dynamic" class="form-control">
</div>
<div class="col-lg-5">
<button type="button" class="btn btn-primary" ng-disabled="!model.label" ng-click="onAddCheckBox()">Submit</button>
</div>
<div class="col-lg-12">
<div class="checkbox col-lg-12" ng-repeat="checkBox in checkBoxes track by $index">
<input type="checkbox" name="name_{{$index}}" id="name_{{$index}}" ng-model="checkBox.selectedCheckBox" class="filled-in square chk-col-pink ng-pristine ng-untouched ng-valid ng-empty" checked="checked" aria-invalid="false">
<label for="checkBox.label">{{checkBox.label}}</label>
</div>
</div>
</div>
function init() {
$scope.isEnableTextBox = false;
$scope.checkBoxes = [];
$scope.model = {};
}
$scope.onEnable = function onEnable() {
$scope.isEnableTextBox = true; // Enable text box on Click Plus Icon
};
$scope.onAddCheckBox = function onAddCheckBox() { // On submit button click push the given name into array and empty the text box. Please refer the attached image.
var _checkBoxModel = angular.copy($scope.model.label);
$scope.model.label = "";
$scope.checkBoxes.push({'label': _checkBoxModel, 'selectedCheckBox': true});
};
init();
Sample Image
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>
I am using Bootstrap Modal. I need multiple action button for different purpose in a single Modal. I already have two button close and ok . i need another called submit or save.
<div class="modal-body">
<div class="row">
<div class="col-lg-8">
<select class="form-control" data-ng-model="review.sessionid" ui-select2 class="comboselection">
<option data-ng-repeat="review in modalOptions.reviews" value="{{review.oid}}">{{review.sessionName}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<textarea class="form-control" name="review.news" data-ng-model="review.news"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnsubmit" type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(review)" ><i class="glyphicon glyphicon-ok"></i>{{modalOptions.actionButtonText}}</button>
<button class="btn btn-deafult" data-ng-click="modalOptions.close()"><i class="fa fa-times"></i>{{modalOptions.closeButtonText}}</button>
</div>
Close button is for close the modal. ok button is pass the object in controller via result variable of modalService.showModal(modalDefaults, modalOptions).then(function (result) . Here is my controller..
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Submit',
headerText: 'Review PMP',
reviews: reviewlist
};
var modalDefaults = {
templateUrl: 'app/partials/pmpReviewModal.html'
};
modalService.showModal(modalDefaults, modalOptions).then(function (result) {
var sessionName = result.sessionName;
var session = result.news;
console.log(sessionName);
});
But my problem is that how can i add another button for pass object for another purpose to the controller ?
I have a small Angular application which repeats a list of project objects and allows editing each individual object.
// app.html
<div ng-controller="ProjectsCtrl">
<div ng-repeat="project in projects">
<!-- EDIT -->
<h3>{{ project.id }}</h3>
<h3>{{ project.title }}</h3>
...
<!-- END EDIT -->
<p>
<button class="btn btn-info" ng-click="updateProject(project); showEditProject=true">Edit Project</button>
<button class="btn btn-info" ng-click="showEditProject=false">Cancel</button>
...
</p>
<div class="box row animate-show-hide" ng-show="showEditProject">
<form name="editProjectForm" class="form-horizontal">
<input ng-model="editProject.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
...
</form>
</div>
</div>
</div>
// app.js
projectsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
...
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
This all works fine but as each object is passed on the ng_clickall the editProject objects are bound to the same model. Is it possible to allow the form to open and each object is bound to each project independently?
Your updateProject method in the parent scope is just assigning project to editProject. You can just reference poject in the edit form. There is no need for the editProject field.
// app.html
<div ng-controller="ProjectsCtrl">
<div ng-repeat="project in projects">
<p>
<button class="btn btn-info" ng-click="updateProject(project); showEditProject=true">Edit Project</button>
<button class="btn btn-info" ng-click="showEditProject=false">Cancel</button>
...
</p>
<div class="box row animate-show-hide" ng-show="showEditProject">
<form name="editProjectForm" class="form-horizontal">
<input ng-model="project.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
...
</form>
</div>
</div>
</div>
// app.js
projectsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
...
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
Put the updateProject function in another controller and attach that controller to the div that has the ng-repeat. For example:
projectsApp.controller('ProjectCtrl', funciton($scope, $http, ConcernSerice) {
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
}
and then:
<div ng-repeat="project in projects" ng-controller="ProjectCtrl">
...
</div>
The ng-repeat creates a scope for each project. This will makes it so that when you do $scope.editProject = obj; this will be done on this scope rather than on the single parent scope created by your ProjectsCtrl.
UPDATE:
If you need to be able to reset any edits you made you will need to save a copy of your object. You can probably do this in your updateProject:
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.previousValue = angular.copy(obj);
$scope.editProject = obj;
});
};
Then you would have to create a method for canceling that copies the values back:
$scope.cancel = function(){
$scope.showEditProject = false;
angular.copy($scope.previousValue, $scope.editProject);
};
Then call it from your template:
<button class="btn btn-info" ng-click="cancel()">Cancel</button>
how do i find the trigger button in form by ng-submit
and get attribut in this button
<form ng-submit="submit()" ng-controller="Ctrl">
<input type="submit" att1="A" att2="B" value="Edit" />
<input type="submit" att1="C" att2="D" value="Delete" />
</form>
<script>
function Ctrl($scope) {
$scope.submit = function() {
alert(this.att1)
alert(this.att2)
}
}
</script>
You can use ng-click to change values on your scope prior to submission
<form ng-submit="submit()" ng-controller="Ctrl">
<input type="submit" ng-click="setAtts('A', 'B')" value="Edit" />
<input type="submit" ng-click="setAtts('C', 'D')" value="Delete" />
</form>
<script>
function Ctrl($scope) {
$scope.submit = function() {
alert($scope.att1);
alert($scope.att2);
};
$scope.setAtts = function(a1, a2) {
$scope.att1 = a1;
$scope.att2 = a2;
};
}
</script>
Edit: As a side note $event will not work for ng-submit, if you're interested in using $event.target (which probably shouldn't be done from a controller anyhow)