Pass ng-model as a ng-click function parameter - javascript

Is that possible to pass a ng-model as a function parameter? for example:
<input type="text" ng-model="myModel">
<button ng-click='save('button1', myModel)'>save</button>
<button ng-click='save('button2', myModel)'>save</button>
<button ng-click='save('button3', myModel)'>save</button>
....
var save = function(buttonIndex, myModel){
myModel = buttonIndex + ' clicked';
}
....
In my case,I have more than one ng-model (6 sets), and I don't want to create 6 sets similar save functions in the controller which only the model is different, if I can pass the model as parameter, I would need to create a single save function is enough.

Since you are already having your model in $scope you could use it directly, otherwise Create a function in your corresponding controller like this,
$scope.save = function(model) {
//do whatever you want
}
Example:
Pass argument in ng-click

This is a easy and fast solution for little operations like your:
<input type="text" ng-model="myModel">
<button ng-click="myModel='button1 clicked'">save1</button>
<button ng-click="myModel='button2 clicked'">save2</button>
<button ng-click="myModel='button3 clicked'">save3</button>
it is not passing parameters, but in the on-click definition you can do also normal code.
http://jsfiddle.net/cwne0stq/

I had a similar need. In an ionic form, I have 6 fields of same type/data for which the values could be set by button, and I didn't want to duplicate the function in the controller. I needed to be able to call a function on button click, passing a field (ng-model) name as a parameter, and wasn't working. But finally this works. Took a bit to figure it out since I'm new to angular/ionic. Hope it helps someone because there wasn't a lot of info on this.
First couple fields example:
<div class="item item-input-inset">
<label class="item item-input-wrapper">
<i class="icon ion-edit placeholder-icon"></i>
<input type="text" placeholder="00:00" ng-model="formdata.time1">
</label>
<button class="button" ng-click="settime('time1')">Now</button>
</div>
<div class="item item-input-inset">
<label class="item item-input-wrapper">
<i class="icon ion-edit placeholder-icon"></i>
<input type="text" placeholder="00:00" ng-model="formdata.time2">
</label>
<button class="button" ng-click="settime('time2')">Now</button>
</div>
And in controller:
.controller('YourCtrl', function ($scope) {
$scope.formdata = {};
$scope.settime = function(field){
var d = new Date();
$scope.formdata[field] = d.getUTCHours()+':'+(d.getUTCMinutes() < 10 ? '0'+d.getUTCMinutes():d.getUTCMinutes());
}
});
If you need to pass a value from a button, you could add parameter:
<div class="item item-input-inset">
<label class="item item-input-wrapper">
<i class="icon ion-edit placeholder-icon"></i>
<input type="text" ng-model="formdata.yourfield">
</label>
<button class="button" ng-click="yourfunction('This Value','yourfield')">This</button>
<button class="button" ng-click="yourfunction('That Value','yourfield')">That</button>
</div>
And same in controller:
.controller('YourCtrl', function ($scope) {
$scope.formdata = {};
$scope.yourfunction = function(value,field){
$scope.formdata[field] = value;
}
});

Related

selecting all class within this in query

well right now I am doing something like this to find all textbox values which has the same class name.
function generalBottom(anchor) {
var sends = $('input[data-name^="noValues"]').map(function(){
$(this).attr('value',$(this).val());
return $(this).val();
}).get();
}
and i call this function on a onclick of submit button like generalBottom(this)
and I have something like as per my requirement
When I click submit button of User I call a general function passing this as a parameter, but the above code gives me the text values of client as well
["perfect", "hyperjack", "julie", "annoying", "junction", "convulated"], which is undesired, I want only ["annoying", "junction", "convulated"] using my anchor params.
How to do this via my this parameter, I thought to traverse through my tags using children(), parent() but I won't be knowing how many fields user have added as its all dynamic, user can add as many values(text boxes).
I tried this
1) $(anchor).find('.rightAbsNo')
2) $(anchor).find('input[data-name^="noValues"]')
3) $(anchor).find('.rightAbsNo').map(function () {
console.log($(this).find('. showNoButton')); })
None of this worked for me.
My html is somewhat like this, code
<div id="attach0" class="leftbottomno">
<div style="overflow: hidden" class="leftbottomAbsolute" id="">
<form>
<span class="absno"><input type="text" required=""
id="absdelete" data-inputclass="leftbottomAbsoluteNo_class"
value="" class="leftbottomabsolutenotest keys" data-value=""
style="margin-bottom:4px; color: #1c1c1c;"> </span>
<a onclick="addAbsoluteValues(this);" style="margin-left: 50px">
<i class="fa fa-plus-circle color-blue-grey-lighter"></i> </a>
</form>
<a onclick="deleteAbsoluteEmpty(this);> </a><br>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue">
<input type="text" id="nonattach" placeholder="values"
data-name="noValues" data-inputclass="absYes_class" value="annoying"
class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id=""> <input type="text"
data-name="noValues" data-inputclass="absYes_class" subattribute=""
value="" class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id="">
<input type="text" data-name="noValues"
data-inputclass="absYes_class" placeholder="values" subattribute=""
value="junction" class="showNoButton showActivity value"
data-value="" >
<button type="button" style="display: none;"
onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div>
</div>
</div>
First of all, you need to define a container to the groups with something like :
<div class="container">input groups</div>
<div class="container">input groups</div>
and change <button type='submit'> to <button type='button'> to prevent submitting the form.
Then change your function to this:
function generalBottom(anchor) {
var all_inputs = $(anchor).parent(".container").find("input");
var input = $(anchor).siblings('input').first();
all_inputs.each(function(){
$(this).val(input.val());
});
}
Here's Jsfiddle
first $(anchor).siblings(input) find inputs
then go through each element from first step and return their value
function generalBottom(anchor) {
var input = 'input[data-name^="noValues"]'
var values = $.map($(anchor).siblings(input), (elemnt, index)=>{
return elemnt.value
})
$('#shows').val(values.join())
}
$('button').on('click',function(){
generalBottom(this)
})
hope this helps

dynamic form field with checkbox in angularjs

I want to submit values of the input field to controller with ng-submit but it shows undefined when i console input model.Each input values are saved with check box. But i want to check if any checkbox is unchecked or not.
Here is form html:
<form id="valueForm" ng-submit="submitValues()">
<div class="small-input list padding" style="padding-top:4px;">
<div ng-repeat="item in inputs track by $index">
<label class="item item-input">
<input type="text" placeholder="" ng-model="value" ng-disabled="ticked">
<ion-checkbox ng-click="addField($index)" ng-change="saveValue(ticked,value,$index)" ng-model="ticked"
ng-disabled="!value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
</div>
</div>
<button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
</form>
Here is controller:
$scope.showButton = false;
$scope.inputs = [{value:''}];
var checkedValues =[];
$scope.addField = function (index) {
if($scope.inputs.length <= index+1 && $scope.inputs.length<10){
$scope.inputs.splice(index+1,0,name);
}
}
$scope.saveValue = function (ticked,item,index) {
if(ticked){
console.log('index'+index);
if(index>0) $scope.showButton =true;
checkedValues.splice(index,0,item);
console.log(checkedValues);
}else{
checkedValues.splice(index,1);
console.log(checkedValues);
}
}
$scope.submitValues = function(){
console.log($scope.value);
}
Because the inputs and checkboxes are inside an ng-repeat directive, the ng-model values need to be a property of the item iterator.
<form id="valueForm" ng-submit="submitValues()">
<div ng-repeat="item in inputs track by $index">
<!-- REMOVE
<input type="text" ng-model="value" ng-disabled="ticked">
<ion-checkbox ng-model="ticked"> </ion-checkbox>
-->
<!-- INSTEAD -->
<input type="text" ng-model="item.value"
ng-disabled="item.ticked">
<ion-checkbox ng-model="item.ticked"> </ion-checkbox>
</div>
<button type="submit" ng-show="showButton">
<i class="ion-ios-arrow-forward"></i>
</button>
</form>
The ng-repeat directive creates a child scope for each item. Using a value without a "dot" will put the value on each child scope. Hence the rule: "always use a 'dot' in your ng-models".
For more information, see AngularJS Wiki -- The Nuances of Prototypical Inheritance
UPDATE
To see the inputs on submit:
$scope.submitValues = function(){
//console.log($scope.value);
console.log($scope.inputs);
}

is there any way to bind ng-model to multiple input fields uniquely inside a directive?

In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.
Here is my code.
Thanks in advance!
these are the images
this is how i am getting
this is what i need
In HTML
<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>
In controller
$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};
$scope.addUser = function(){
$scope.Users= [];
var obj = {
userhobby : $scope.user.morehobies
};
$scope.Users.push(obj);
menuStorage.put($scope.Users);
//menustorage is service to store user in localStorage.
In directive
'use strict';
angular.module('myApp')
.directive('myHobby', function() {
return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});
this is template: my-hobby.html
<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
For this i would suggest some other way if its ok with you.
If your hobbies is coming in array, like
user.morehobies = ['Reading', 'Writing']
or create array for storing hobbies.
then inside directive you can pass that object in directive.
I will use ng-repeat inside directive.
<div class="input-group" ng-repeat="h in hobies">
<input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.
and whenever user clicks on remove you can remove that item from array.

Modify ng-model from view

I´m pretty newbie on AngularJS, how can I update the value of my ng-model from my view?
Right now I have form and I´m updating app_key input, but when I call my module and I check the $scope.variable, the value has not change.
Here my code
<div>
<br>
<div class="field_row">
<label for="app_key">AppKey:</label>
<input id="app_key" type="text" ng-model="appKey"> --> this is the input that I´m changing the value
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="selectUser()">
Select
</button>
</div>
And in my module I have the method selectUser
$scope.selectUser = function () {
$scope.setAppKey($scope.appKey); --> Here the appKey it´s not modified
};
Solution
I dont know why, but to make it works I need to pass the ng-model to the controller function
<input id="app_key" type="text" ng-model="appKey" ng-change="changeAppKey(appKey)">
I made this working JSFiddle using your code. It seems to work just fine. Are you sure your setAppKey function is correct ?
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.selectUser = function () {
console.log($scope.appKey);
};
}
HTML
<div ng-controller="MyCtrl">
<div>
<div class="field_row">
<label for="app_key">AppKey:</label>
<input id="app_key" type="text" ng-model="appKey">
</div>
</div>
{{appKey}}
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="selectUser()">
Select
</button>
</div>
</div>

AngularJs how to create a list of same services

I have a Service who can add by a user. It can be one or more.
I have a button to add a Service
<button type="button" class="btn btn-success" ng-click="addService()">
<span class=" glyphicon glyphicon-plus">
</span>Add Service
</button>
When i click Add Service angular should creare a new Service in a list of services.
I have two textareas for Informations of the Service.
<label for="usr">Name:</label>
<input type="text" class="form-control" id="name"></br>
<label for="usr">Service:</label>
<input type="text" class="form-control" id="service"></br>
When i click on the Add Service Button a knew Service Button should be generated with this textareas.
How can generate that and add the new Service to a list of services?
$scope.services = [];
$scope.addService = function() {
var newService = {
name : 'a name',
service : 'a service'
};
$scope.services.push(newService);
}
and the HTML
<div ng-repeat="service in services"><label for="usr">Name:</label>
<input type="text" class="form-control" value="{service.name}"></br>
<label for="usr">Service:</label>
<input type="text" class="form-control" value="{service.service}"></br></div>
You would use ng-model which will take care of 2 way binding fields to scope object
<label for="usr">Name:</label>
<input ng-model="newService.name"></br>
<label for="usr">Service:</label>
<input ng-model="newService.service"></br>
Then in controller
$scope.addService = function() {
// copy and push newService object to array
$scope.services.push(angular.copy($scope.newService));
// reset newService object to clear fields
$scope.newService = {};
}
If you use a form for this you can use angular validation and move the ng-click to ng-submit on the form. ng-submit won't trigger if validation fails

Categories