I am creating an app using Ionic Framework and I'm facing a problem.
I'd like to create a search function with tags. When we click on a button, the value is given to an input.
My code :
<div id="rech-btns" class="padding" ng-model="searchQuery" ng-controller="RechCtrl">
<button class="button button-outline button-balanced espace rech-text" ng-click="showDiv('Facile')">
Facile
</button>
<!-- There are others buttons but I deleted them for you to see the whole code -->
</div>
<div id="rechrech">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!-- <input type="search" placeholder="Recherche..." /> -->
<input type="search" ng-model="searchQuery">
<!--<input type="text" text="facile" ng-model="searchQuery">-->
</label>
<div class="padding">
<button id="paramrech" class="button button-outline button-balanced espace rech-text">
<!-- the value arrives here -->
</button>
</div>
I tried to change the value with my function but it doesn't work so I'm asking you :p
My function :
.controller('RechCtrl', function($scope) {
$scope.showDiv = function(param) {
document.getElementById('rech-btns').style.display = "none";
//so when we click, this disappear
document.getElementById('rechrech').style.display = "block";
//this appear
document.getElementById("paramrech").innerHTML = param;
//and here I don't know what to do to change what I want
};
})
Do you have any idea ?
Related
I have the following modal, With ng-model item
<div class="uk-modal" id="modal_header_footer">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<h3 class="uk-modal-title">Editar Usuario</h3>
</div>
<form id="form_validation" class="uk-form-stacked">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">name<span class="req">*</span></label>
<input id="nombre" type="text" name="nombre" ng-model="item.name" required class="md-input" md-input />
</div>
</div>
</div>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="email">Email<span class="req">*</span></label>
<input id="email" type="email" name="email" ng-model="item.email" data-parsley-trigger="change" required class="md-input" md-input />
</div>
</div>
</div>
</form>
<div class="uk-modal-footer uk-text-right">
<button type="button" class="md-btn md-btn-flat uk-modal-close">Cerrar</button>
<button type="button" ng-click="EditarUsuario(item)" class="md-btn md-btn-flat md-btn-flat-primary">Aceptar</button>
</div>
</div>
The modal call it from a button belonging to a record in datatable, "data-uk-modal="{target:\'#modal_header_footer\'}""
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withClass('parent').withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.usuario[data.id] = data;
return ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i>'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i>';
})
];
I need to pass the data parameter, and so make use of the ng-model in the modal
There is no difference between the way we use ng-model in a modal and any other part of the website.
In your case, I suppose you want to show the user's data displayed which belong to a specific record in the table.
So if your ng-model in the modal belongs to the same controller which contains the edit func, you just need to bind the information passed as parameter to the corresponding ng-model in the modal. When the modal shows up, it will show the bind information in the modal.
Let's say, in your modal you have this:
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
Then in your edit function you just have to say
function edit(user){
$scope.item = user; //...item is the var used for binding the information to the modal and user is the var coming from the table
}
This can solved using dummy object. here is a code
<td title="'Payment'"> <button type="button" class="btn btn-info btn-lg pay-btn" data-toggle="modal" data-target="#myModal" ng-click="mommy(obj)" >yuty</button>
<!-- Modal content-->
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group">
<label>Amout</label>
<input type="Number" ng-model="vvv.payment">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng- click="mono=false">Close</button>
<button type="button" class="btn btn-default" ng- click="modify(vvv._id,vvv)">Submit</button>
</div>
</div>
dummy object
$scope.mommy = function(h){
console.log(h.payment);
$scope.vvv = h;
}
hope you get to understand it,
This is better way to use it
I'm building a form using Angular 1.1.1 and Ionic.
There are many "wallets" and the user needs to send a new "value" to each of the wallet. My form has a validation for all fields which works fine when the 'submit' button for the form is pressed.
However, I also have a button next to each wallet to send only value to this wallet (not different values to all wallets). When I press it, all the validation errors appear, but I need error to be visible only for the particular wallet.
My form (index.html):
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="myForm.$submitted==true && myForm.wallet_{{wallet.id}}.$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
My controller (values.js):
'Use Strict';
angular.module('App')
.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
$scope.sendValues = function(wallets){
if ($scope.myForm.$valid) {
...
} else {
$scope.myForm.submitted = true;
}
},
$scope.sendValue = function(wallet){
if (wallet.value == null) {
$scope.myForm.submitted = true;
} else {
...
}
}
})
You need to create a form for each wallet
This is due to your html name attributes has same value inside ng-repeat
Use $index in your name field for differentiate all the name attribute.
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{$index}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="myForm.$submitted==true && myForm.wallet_{{$index}}.$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
You have to create a form inside form again. But as per HTML standard you can not have nested form. But angular provided that ability to have nested form but the inner form should be ng-form. Which mean you are going to wrap form & inside that you can find multiple ng-form's.
So you should have ng-form="innerForm" which will keep track of each repeated form.
Other thing which I observed is, you did mistake while using ng-show(you had {{}} inside ng-show expression, which would not work). To fix it you could access object via its key like ng-show="innerForm['wallet_'+wallet.id].$error.required"
Markup
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div ng-form="innerForm" class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="innerForm['wallet_'+wallet.id].$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="innerForm.$submitted==true && innerForm['wallet_'+wallet.id].$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
im starting to work with ionic, i tried creating a log-in page, and it works, i can see on the log that when i clicked the function executed and looked for the user, however nothing happens, i have to click 2 or 3 times so that the view can change i have no idea why this happens. i tried with the submit tag on the form too, and it stays the same.
HTML:
<body>
<ion-view view-title="Iniciar Sesion">
<ion-content has-header="true" padding="true">
<form name="loginForm" novalidate="">
<div class="row row-center">
<div class="col col-center">
<label class="item item-input">
<span class="input-label">Correo</span>
<input type="text"
ng-model="Usuario">
</label>
<label class="item item-input">
<span class="input-label">Contraseña</span>
<input type="password" ng-model="contrasena" ng-minlength="5" ng-maxlength="20" required >
</label>
<button ng-click="login(Usuario,contrasena)"value="Iniciar" class="button button-block button-calm" ng-disabled="!Usuario || !contrasena">
Iniciar
</button>
{{erronea}}
</div>
</div>
</form>
<ion-tabs class="tabs-dark tabs-icon-top">
<ion-tab title="Olvidé mi contraseña" href="#/olvide" icon="ion-information- circled" ></ion-tab>
<ion-tab title="Crear Cuenta" href="#/CrearU" icon="ion-person-add" ></ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
</body>
Javascript:
var datosLogin= function($scope,$location) {
$scope.login=function (Usuario,contrasena){
var ref = new Firebase('https://resplendent-torch-5430.firebaseio.com/');
ref.authWithPassword({
email : Usuario,
password : contrasena
},
function(error, authData) {
if (error) {
$scope.erronea="Usuario o contraseña invalida";
} else {
$location.path("/inicio");
}
});
};
}
Last week I made a function that takes a true/false value out of a pair of buttons (one for true, one for false) and puts it into a $scope variable.
It worked perfectly.
$scope.trueOrFalse = function(truefalse) {
if (truefalse == false){
$scope.value = false;
document.getElementById("makeFalse").className = "button active";
document.getElementById("makeTrue").className = "button";
console.log($scope.isBusiness);
} else if(truefalse == true){
$scope.value = true;
document.getElementById("makeTrue").className = "button active";
document.getElementById("makeFalse").className = "button";
console.log($scope.value);
}
}
But now, I have basically the same exact thing in another page, and its only working once, on the first click, where, if the chosen value is false, I get a console.log that it is false, then nothing happen if clicked again, to change the value.
But if the value chosen is true, then when the next click is attempted, I start to get:
TypeError: fn is not a function
at $parseFunctionCall (ionic.bundle.js:21045);
at ionic.bundle.js:53458;
at Scope.$get.Scope.$eval (ionic.bundle.js:23100);
at Scope.$get.Scope.$apply (ionic.bundle.js:23199);
at HTMLAnchorElement.<anonymous> (ionic.bundle.js:53457);
at HTMLAnchorElement.eventHandler (ionic.bundle.js:11713);
at triggerMouseEvent (ionic.bundle.js:2863);
at tapClick (ionic.bundle.js:2852);
at HTMLDocument.tapMouseUp (ionic.bundle.js:2925);
What's going on here?
Here's the HTML
<ion-view view-title="Biz Post/Uploading">
<ion-content>
<!-- Begin Second Set of Tabs -->
<div class="button-bar">
<a class="button" id="item" data-ng-click="isDeal(false)">Item</a>
<a class="button" id="deal" data-ng-click="isDeal(true)">Deal</a>
</div>
<!-- End Second Set of Tabs -->
<!-- Section -->
<div class="list-inset">
<center><img src="http://placehold.it/350x150"></center>
</div>
<div class="list">
<div class="item item-divider">
Add thing
</div>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="add location" ng-model="thing.thing2">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="add price" ng-model="thing.thing3">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="add item description" ng-model="item.thing">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">thing</span>
<input type="text" placeholder="set limit" ng-model="thing.thing4">
</label>
<button class="button button-full button-balanced" data-ng-click="pushData()">
push data
</button>
</div>
</ion-content>
</ion-view>
With ng-class the code would look like this:
http://plnkr.co/edit/6sOzUmAcIzVjLEOL9Jva?p=preview
<div ng-controller="MainCtrl">
<button id="makeTrue" ng-class="{button :true, active: truefalse}" ng-click="truefalse = !truefalse">Make true</button>
<button id="makeFalse" ng-class="{button :true, active: !truefalse} " ng-click="truefalse = !truefalse">Make false</button>
</div>
In controller: $scope.truefalse = true;. If truefalse is true, then makeTrue has the active class (that seems a bit off, but it's the same in your code), otherwise makeFalse is active.
This way you're not playing with the DOM in your controller(which should be avoided).And your $scope is less cluttered.
For the ng-click you can define a function on $scope and call it instead of changing truefalse in an expression (but that's up to you)
I have two buttons on a simple login form in a dropdown on a header bar that is outside of the view/content part of my single page app. There are two buttons on the form:
EDIT: both buttons need to submit the form, but I have two different outcomes; one does new member sign-up, the other login existing members. I do not want to handle this on multiple partials.
My Website
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li class="divider-vertical"></li>
<li>
<div class="btn-group btn-group-xs navbar-btn btn-pad">
NL
FR
EN
</div>
</li>
<li class="divider-vertical"></li>
<!-- Begin Login Section -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Signup/Login <strong class="caret"></strong></a>
<div class="dropdown-menu">
<div class="accountForm">
<!--form action="#" method="post" role="form"-->
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" ng-model="credentials.username" name="username" class="form-control input-sm" placeholder="username" required/>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" ng-model="credentials.password" name="password" class="form-control input-sm" placeholder="password" required/>
</div>
<div class="form-group">
<label class="control-label" for="remember">
<input type="checkbox" class"form-control" name="remember" value="1"/>Remember me</label>
</div>
<div class="form-group btn-group-justified">
<div class="btn-group">
<button button-id="join" type="submit" class="btn btn-default">New? Join us</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button button-id="login" type="submit" class="btn btn-primary active">Log in</button>
</div>
</div>
</form>
</div>
</div>
</li>
<!-- End Login Section -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div id="page" ng-view>
The first button is intended to send the user to the login process (if they are already registered) and the second button is for new users to register.
The problem I have is that if I use the <form ng-submit="myFunction()"> directive, I haven't yet found a way to determine the button that was pressed.
I can alternatively create my own directive, where I can determine the button that was pressed, but this seems to be a lot of coding effort by comparison, and is this really the Angular way?
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// when attributes.buttonId = 'join'
//call the create script
// when attributes.buttonId = 'login'
//call the authenticate script
});
}
}
});
So my question is simply using ng-submit="myfunction()"can i determine which button was pressed?
I know I am answering my own question, but this seems to be the "correct" way to do this:
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group btn-group-justified">
<div class="btn-group">
<button type="submit" class="btn btn-default" button-id="join">New?Joinus</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button type="submit" class="btn btn-primary active" button-id="login">Log in</button>
</div>
</div>
</form≥
The above is the section of the form that I'm interested in. Note that both buttons have type="submit"and not type="button" . This is important for two reasons:
1) you can use the standard HTML5 form validation options when you click the buttons
2) it forces the ng-submithandler.
First the controller
app.controller('homeController', function($scope){
$scope.buttons = { chosen: "" };
$scope.login = function (){
// can get the button that was clicked as it is now added to the scope
// by the directive
alert($scope.buttons.chosen);
};
});
... and now the directive.
Next I handle the click on either button using a directive. This has the purpose of allowing me to identify the button, and pass it to the $scope. This was actually the main purpose of the excercise, but I realised that I could now bind this to anything where I suspected a click and pass some data to the scope.
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// able to get the name of the button and pass it to the $scope
// this is executed on every click
scope.buttons.chosen = attributes.buttonId;
// alert(attributes.buttonId + scope.buttons.chosen);
});
}
}
});
I am not sure if i have understood your problem correct but you can differential based on
Calling different function for each ng-submit such as ng-submit="myFunction1()" and ng-submit="myFunction2()"
You can also do the same passing in context using a parameter ng-submit="myFunction(from)"
You can also pass in special $event object as parameter ng-submit="myFunction($event)". This object contains the target information.
You can get a handle to the $event in your ng-click, and get its target, and then get its id, but I wouldn't recommend that it is not the angular way of doing things:
<input type="submit" id="test" data-ng-click="showAlert($event)">
Click Me
</button>
$scope.showAlert = function(event){
alert(event.target.id);
}
Another way is to set property dirty for this button and then to check which of the buttons is dirty.
For example if you have a form named "myForm" you can write something like this:
<form name="myForm" id="myForm" ng-submit="save()" ng-model="myForm" novalidate>
<input type="submit" name="save" ng-model="btnSave" ng-click="(frmForm.save.$setDirty())" />
<input type="submit" name="saveOut" ng-model="btnSaveOut" ng-click="(frmForm.saveOut.$setDirty())" />
</form>
In Javascript file you can handle it by:
if ($scope.btnSave.$dirty){
alert("First was clicked)}
else{
alert("First was clicked)}
}