AngularJS input change reset - javascript

I have a simple search box. When the input box is not empty a delete button shows up to remove the text inside the box. After that the button should disappear again until i type something in the box again.
When i manually remove the text the delete box is disappearing, but when i press the delete button its not working. Do i have to use .length? I was using .value before like that: if ($(".form-control").value == '' || $(".form-control").value == $(".form-control").defaultValue) {
Thanks in advance.
a = $scope
a.change = function () {
a.limit = 6;
var x = a.search;
if (x.length == '') {
$(".form-inline").removeClass("isset");
} else {
$(".form-inline").addClass("isset");
}
};
a.clearSearch = function () {
a.search = "";
a.limit = 6;
};
html part:
<input type="search" ng-change="change()" ng-model="search" class="form-control" placeholder="Labor durchsuchen...">
<div class="icon-close" ng-click="clearSearch()"></div>

You can use ng-class for that what you are doing with JQuery:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
$scope.change = function () {
//do anything here
};
$scope.clearSearch = function () {
$scope.formData.search = "";
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="search" ng-class="(formData.search != undefined && formData.search)?'isset':''" ng-change="change()" ng-model="formData.search" class="form-control" placeholder="Labor durchsuchen...">
<div class="icon-close" ng-click="clearSearch()"></div>
</div>

You should be able to drop the jQuery code and just use
<div class="icon-close" ng-click="clearSearch()" ng-show="search.length===0"></div>

I think you need to trigger your a.change function inside a.cleanSearch to check again if something is typed or not.
a.clearSearch = function () {
a.search = "";
a.limit = 6;
a.change()
};

Related

AngularJS : Function only updates variable in view after an event happens

I have a simple input field :
<input id = 'input' ng-model="addMe">
that is connected to a script :
<script>
document.getElementById('input').onkeydown = function(event) {
if (event.keyCode == 13) {
angular.element(document.getElementById('input')).scope().addItem();
}
}
</script>
that is there so that whenever the user presses enter in the input field; the addItem function in AngularJS that adds the string from the input field into an array is called.
$scope.addItem = function () {
found = false;
if (!$scope.addMe) return $scope.errorText = "Please Specify an Item";
else {
angular.forEach($scope.Products, function(value, key) {
if (value.name.toUpperCase() == $scope.addMe.toUpperCase()){
$scope.cart_items.push({name : value.name, price : value.price});
$scope.grandTotal += value.price;
$scope.addMe = '';
$scope.errorText = '';
found = true;
}
});
if(!found){$scope.errorText = "Item does not exist";}
}
}
note that cart_items, and products are arrays (not directly related to the problem)
The Function addItem is called when i press enter, passing the correct variables; but the variables like errorText, grandTotal, and also the data that is supposed to be pushed into the array cart_items, only updates when i press another key, or click.
i know the function is doing what it's supposed to do; because i used console.log to debug.
Here is a sample code, change text field value, press Enter and look at the console output.
angular.module('app', []);
angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {
$scope.fieldValue = "Hello";
$scope.keydown = function(event) {
if(event.key === 'Enter') {
$scope.addItem((event.srcElement || event.target).value);
}
}
$scope.addItem = function (value) {
// do something
console.log('Add item with value', value);
}
}]);
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ExampleController">
<input type="text" ng-model="fieldValue" ng-keydown="keydown($event)">
</body>
</html>
Here is also a plunker with the code above

How To Add Item To ng-repeat list and stop list item being changed by databinding

I need to build an ng-repeat list from values typed and submitted using html inputs. It works, I can return the item from the input using ng-repeat, but when editing the input for the next item, the input value is still bound to the value in the ng-repeat, and then changes that value instead of adding a completely new one. I'm sure I'm missing something simple, but stuck at the moment.
How do I add new items that are not binded to the input on each ng-click?
HTML:
<div ng-controller="MyCtrl">
Hello, {{name}}!
<br/>
<input ng-model='newitem1' />
<input ng-model='newitem2' />
<input ng-model='newitem3' />
<button ng-click='add()'>Add</button>
<br/>
<b>Items Added Below</b>
<div select-last ng-repeat='item in items'>
<div ng-model='item' id='item-{{$index}}' class='input-{{$index}}'>{{newitem1}} {{newitem2}} {{newitem3}}</div>
</div>
Javascript:
var myApp = angular.module('myApp',[]);
myApp.directive('selectLast', function () {
return function (scope, element, attrs) {
if (scope.$last=== true) {
console.log("the last element is here");
}
}
});
function MyCtrl($scope) {
$scope.name = 'Please try entering something and click Add button';
$scope.items = [];
$scope.newitem1 = '';
$scope.newitem2 = '';
$scope.newitem3 = '';
$scope.add = function(){
$scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3);
}
}
You could clone the item using angular.copy() so it is a copy of the data, however not a direct reference to it.
This will allow you to continually add new items.
function MyCtrl($scope) {
$scope.name = 'Please try entering something and click Add button';
$scope.items = [];
$scope.newitem1 = '';
$scope.newitem2 = '';
$scope.newitem3 = '';
$scope.add = function(){
var item1 = angular.copy($scope.newitem1),
item2 = angular.copy($scope.newitem2),
item3 = angular.copy($scope.newitem3);
$scope.items.push(item1, item2, item3);
}
}
I realized that I was using the input model for my expression.
{{newitem1}}
Instead of
{{item.newitem1}}
Fixed

How add element to div in angularjs?

i want to add element to div in angularjs. so write this code but not work correctly. thanks for your help :)
function TestController($scope) {
$scope.addElement = function(){
var myElements = angular.element(document.querySelector('#form'));
console.log(myElements);
if(myElements.length == 0)
alert("Not Find");
else
myElements.prepend( myElements[0].children[1]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
<input type="button" ng-click="addElement()" value="add"></input>
<div id="div">
<input type="text" name="name">
</div>
</div>
Here is what I have tried.
$scope.addElement = function(){
var myElements = angular.element(document.querySelector('#form'));
console.log(myElements)
console.log(myElements[0].children[1])
if(myElements.length == 0)
alert("Not Find");
else{
html = angular.element(myElements[0].children[1]).clone();
myElements.append( html);
}
You should use angular clone method.
EDIT.
Here it the Plunker
If I understood your question correctly, you want to append an input element to div on each ng-click?
You just need to target the div with jquery and append the element with it.
See example: http://jsbin.com/seyawemijo/edit?html,js,output
Often than not when you want to modify the DOM directly, there is a way to do it without.
"Thinking in Angular way"
function TestController($scope) {
$scope.textArr = [];
var count = 1;
$scope.addElement = function() {
var ele = {
model: 'hello ' + count++
}
$scope.textArr.push(ele);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
<input type="button" ng-click="addElement()" value="add" />
<div ng-repeat="text in textArr">
<input type="text" ng-model="text.model">
</div>
<div>{{textArr}}</div>
</div>
Try this one
myElements.prepend(myElements[0].children[1].value);
I have altered the above solution to add other attributes(including id) to the input text element
var globalCntr = 0;
function TestController($scope) {
$scope.addElement = function() {
globalCntr ++;
$('<input>',{
type:'text',
id:('inputText'+globalCntr)
}).appendTo($('#target'));
};
}

How to change value of variable in $scope on-click?

I would like to change the value of $scope.complete to false when the user clicks a particular URL. Is this possible to do in Angular?
I show credit card form to the user based on this variable. On first page load the variable is true/false based on value coming from server side that suggests whether there is a credit card on file or not.
If there is a credit card on file then I want to have a change url. Which, when clicked, would change the value of $scope.complete to false and the credit card form would show up.
This is my code at the moment:
JS
$scope.complete = false;
djangoAuth.profile().then(function(data){
$scope.model = data;
if ($scope.model.profile.stripe_id.length <= 0)
$scope.complete = false;
else
$scope.complete = true;
});
html:
<div ng-if="complete == false">
<!--show form-->
</div>
<div ng-if="complete == true">
Credit card already on file. Change?
</div>
You can bind a function to ng-cick and have the function change the value of the property:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.complete = true;
$scope.change = function() {
$scope.complete = false;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-show="complete == false">
form here
</div>
<div ng-show="complete == true">
Credit card already on file. Change?
</div>
</div>
See this fiddle showing ng-click on archive()
http://jsfiddle.net/dakra/U3pVM
archive
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
This isn't my fiddle, but shows how to use it.
Documentation is also at:
https://docs.angularjs.org/api/ngTouch/directive/ngClick
JS
$scope.complete = false;
djangoAuth.profile().then(function(data){
$scope.model = data;
// default scope
$scope.complete = true;
$scope.change = function(){
$scope.complete = true;
}
if ($scope.model.profile.stripe_id.length <= 0)
$scope.complete = false;
else
$scope.complete = true;
});
html:
<div ng-if="complete == false">
<!--show form-->
</div>
<div ng-if="complete == true">
Credit card already on file. <a ng-click="change()" ng-href="#">Change?</a>
</div>

Check if two elements have been clicked, and a value has been entered in a textbox in Javascript

Here's a demo of what I'm talking about - http://jsfiddle.net/MatthewKosloski/qLpT9/
I want to execute code if "Foo" has been clicked, and a number has been entered in the input.. and if "send" has been clicked.
<h1>Foo</h1>
<input type="text" id="amount" placeholder="Enter in a number."/>
<button id="send">Send</button>
I'm pretty sure I'm overthinking this, I'd appreciate the help on such a concise question.
try this one: jfiddle link
var send = document.getElementById("send");
var h1 = document.getElementsByTagName("h1");
var foo_clicked = 0;
h1[0].onclick = function(){foo_clicked += 1; };
send.onclick = function(){
if(document.getElementById("amount").value !='' && foo_clicked >0 )
alert ('poor rating');
};
As per your statement & taking some assumptions, try this way:
(This executes function twice - When there is a change of text or a click of the button).
HTML:
<h1 id="">Foo</h1>
<input type="text" id="amount" placeholder="Enter in a number."/>
<button id="sendBtn">send</button>
JS:
document.getElementById("amount").addEventListener("change",poorRatingCalculation);
document.getElementById("sendBtn").addEventListener("click",poorRatingCalculation);
function poorRatingCalculation() {
var rating = document.getElementById("amount").value;
if(rating=="poor") alert("Poor Service");
}
DEMO: http://jsfiddle.net/wTqEv/
A better, self contained example:
http://jsfiddle.net/qLpT9/7/
(function()
{
var clicked = false;
var header = document.getElementById("header");
var amount = document.getElementById("amount");
var send = document.getElementById("send");
header.addEventListener("click", function()
{
clicked = true;
});
send.addEventListener("click", function()
{
if(!clicked)
{
return
}
// Foo has been clicked
var value = amount.value;
console.log(value;)
});
})();
Is this what you were looking for?
http://jsfiddle.net/qLpT9/5/
function poorRatingCalculation(){
if(myInput.value) {
alert(myInput.value);
}
}
var foo = document.getElementById("foo"),
myInput = document.getElementById("amount");
foo.addEventListener("click", poorRatingCalculation, false)

Categories