angular clear form - javascript

Totally new to angular and appreciate any help received. I'm trying to build a satisfaction app in angular, I am using ng-show to pose the questions one at a time and collecting the data and sending it to firebase at the end. The difficulty I am having is clearing the answers previously give. I have tried resetting the scope and using $setPristine() but keep getting an error.
HTML
<div id = "question" class="row" ng-show="question">
<div id="badResponse" ng-click="selectResponse('bad')">
</div>
<div id="goodResponse" ng-click="selectResponse('good')">
</div>
</div>
<div ng-show="why">
<ul ng-repeat="option in whyOptions">
<li><input type="checkbox" class="reason" checklist-model="form.why" checklist-value="option">{{option}}</li>
</ul>
<button id ="enterBtn" ng-click="responseReason()">Next</button>
</div>
<div ng-show="more" class="more">
<button id ="skipBtn" ng-click="moreInfo()">{{form.extraInfo.length != 0 ? 'Next' : 'Skip'}}</button>
</div>
<div ng-show="thankYou">
<button id ="thankYouBtn" ng-click="thankYouFunction()">Home</button>
</div>
JS
$scope.form = {
experience: '',
extraInfo: ''
};
$scope.whyOptions = [
'reason 1',
'reason 2',
];
$scope.selectResponse = function(response) {
$scope.form.experience = response;
};
$scope.thankYouFunction = function() {
$scope.responses.$add({
customerRsponse: $scope.form
});
$scope.form.$setPristine();
};
});

Related

Remove specific data from firebase using Angularjs

I'm trying to remove specific data from firebase using angularjs. But my coding removes all data from it. Any Help would be Appreciated.
For Example i need to delete the second data as highlighted using the remove button in it.
My HTML:
<div class="container" ng-controller="budgetCtrl">
<div class="row list" ng-repeat="kasu in panam">
<div class="col-6"> {{ kasu.title }} </div>
<div class="col-6 text-right total">
{{ kasu.spent | currency:"₹" }}
<button type="button" ng-click="deleteSpent(panam)">Remove</button>
</div>
</div>
<div class="row" style="background: #1feb6b">
<div class="col-6"> Total Money spend </div>
<div class="col-6 text-right"> {{ getTotal() | currency:"₹" }} </div>
</div>
</div>
My JS:
var nombre = angular.module('nombre', ['ngRoute', 'firebase']);
nombre.controller('budgetCtrl', ['$scope', 'money', '$firebaseObject', function($scope, money, $firebaseObject){
money.then(function(data){
$scope.cash = data;
});
var ref = firebase.database().ref();
$scope.panam = $firebaseObject(ref);
$("#nombre").submit(function() {
if( (!$("#Spentfor").val()) || (!$("#SpentAmount").val()) ) {
$(".form-control").css({"border":"3px solid red"});
}
else {
$(this), console.log("Submit to Firebase");
var Spentfor = $("#Spentfor").val(),
SpentAmount = $("#SpentAmount").val(),
total = { title: Spentfor, spent: SpentAmount};
return ref.push().set(total).then(function() {
$("#Spentfor, #SpentAmount").val("");
});
}
});
$scope.getTotal = function(){
var total = 0;
$scope.panam.forEach(p => {
total += parseFloat(p.spent);
});
return total;
}
$scope.deleteSpent = function(info){
$scope.panam
.$remove(info)
.then( function(ref){}, function(error){})
}
}]);
On Above JS i'm trying to delete specific data in firebase using deleteSpent() function. I know that i'm missing to targeting the specific data in my JS. If somebody helps me to solve and understand its concept would be appreciated.

Vue.js dynamic element creation with localStorage

I'm completely new to Vue and I can't understand the proper way to render components with dynamic values in Vue.js.
So I have this code below :
new Vue({
el: "#notes",
data: {
title: "",
body: ""
},
methods: {
add: function() {
localStorage.setItem($("#title").val(), $("#body").val());
location.reload(true);
},
clear: function() {
localStorage.clear();
location.reload(true);
}
},
created: function() {
for (i = 0; i < localStorage.length; i++) {
this.title = localStorage.key(i);
this.body = localStorage.getItem(localStorage.key(i));
}
}
});
<div id="notes">
<div class="container">
<div class="form-group">
<label for="title">Enter title</label>
<input class="form-control" id="title"/>
</div>
<div class="form-group">
<label for="body">Enter body</label>
<textarea class="form-control" id="body"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" #click="add">Add</button>
</div>
<div class="card" style="width:18rem;" v-for="i in localStorage">
<div class="card-body">
<h5 class="card-title">{{title}}</h5>
<p class="card-text">{{body}}</p><a class="card-link" #click="clear">Delete</a>
</div>
</div>
</div>
</div>
And I can't figure out why does this code renders the elements with the same values, I mean if I have two values in localStorage it renders two elements with the value of the last one on localStorage.
Maybe there's some problem with the loop on created? I need some help with understanding the Vue rendering and fixing my function
CodePen
Thank you very much for spending your precious time with my issue! Thank you for any help!
You have one title variable and one body variable. It can't store two values in one variable, so the second overwrites the first. You need arrays.

AngularJS - Dynamic Checkboxes to hide/show Divs

I'm new to front-end web development. I am creating checkboxes dynamically using AngularJS.
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="newObject[x.product_brand]">
<label> {{ x.product_brand }} </label>
</div>
Following the methods given on the links below, I want to hide/show divs using
using the dynamically created checkboxes.
Dynamic ng-model
ng-show
Here's the code-
<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="newObject[x.product_brand]">
<div class="panel-heading">
{{x.product_brand}}
</div>
<div class="panel-body">
</div>
</div>
Controller-
app.controller('BrandController', function($scope, $http) {
getProductsInfo();
function getProductsInfo() {
$http.get("sql.php").success(function(data) {
$scope.Brands = data;
});
};
});
But it is not working. Checking/Unchecking the checkboxes does nothing.
I think you need something like this runnable fiddle. This kind of handle is easy to manage with AngularJS. Welcome =) !!! Please note: The $timeout is to simulate your async $http request - its not a part of the solution.
View
<div ng-controller="MyCtrl">
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="x.active">
<label> {{ x.product_brand }} </label>
</div>
<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="x.active">
<div class="panel-heading">
{{x.product_brand}}
</div>
<div class="panel-body">
</div>
</div>
</div>
AngularJS demo application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope, $timeout) {
$scope.Brands = [];
init();
function init () {
$timeout(function () {
$scope.Brands = [{
product_brand: 'brand 1'
},{
product_brand: 'brand 2'
},{
product_brand: 'brand 3'
},{
product_brand: 'brand 4'
}];
});
}
});
Probably it is not working because you never defined newObject on the $scope. So actually you are trying to access undefined[x.product_brand].
Something like $scope.newObject = {}; in your Controller should do the trick.

How to display fetched records one by one

I am working in angular-js, javscript and HTML. I am able to fetch a list of customer names and their details from the database, but I want to display those records one by one when I press next button. Can you please suggest me how to do this
Thanks in advance..
You pressed on some button , and some event will be fired and you will hit some API and response will be shown to the page . if yes lets say on button click ShowData function get triggered .
App.controller('CustomerCtrl',['$scope',function($scope){
$scope.ShowData = CustomerService.Names().then(function(data){
$scope.customers = data
})
}])
in Html
<div ng-controller="CustomerCtrl">
<div ng-repeat="customer in customers">
<h3 ng-bind="customer.name"></h3>
</div>
</div>
<div ng-controller="CustomerCtrl">
<button value="Next" ng-click="next()">
<div>
<h3>{{name}}</h3>
</div>
</div>
and your js file
App.controller('CustomerCtrl',['$scope',function($scope){
$scope.ShowData = CustomerService.Names().then(function(data){
$scope.customers = data;
})
var cnt=0;
$scope.next=function(){
$scope.name=$scope.customers[cnt].name;
cnt++;
}
}])
You can solve the above issue by using ng-repeat with limitTo filter.Here $scope.customers contains JSON array.Also limitTo is Controlled by using a variable i.
function MyCtrl($scope) {
$scope.i=1;
$scope.customers = [{
"firstName": "John",
"place":"USA",
"number":"78437375"
}, {
"firstName": "Anna",
"place":"Asia",
"number":"546464656"
}, {
"firstName": "Peter",
"place":"Europe",
"number":"24353535"
}];
$scope.showMoreCustomers=function()
{
$scope.i++;
}
$scope.showLessCustomers=function()
{
$scope.i--;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<button ng-click="showMoreCustomers()">+</button>
<button ng-click="showLessCustomers()">-</button>
<ul>
<li ng-repeat="cust in customers | limitTo:i">{{cust.firstName}},{{cust.place}},{{cust.number}}</li>
</ul>
</div>

Bootstrap radio tabs not working with Knockout

I tried to use Bootstrap radio button data toggle for tabs, my render of DOM for this happens through Knockout. the tab does not seem to switch between active and inactive tab correctly.
Here is a working example: http://jsfiddle.net/msurguy/x8GvJ/
Here is how to recreate the problem (JSFiddle):
<div id="tabtest" data-bind="foreach: arrayItems">
<div data-bind="attr:{'id':'itemtab' + $index()}" class="btn-group " data-toggle="buttons-radio">
<a data-bind="attr:{href:'#entitysearchitem' + $index()}" class="btn " style="background-color: #f5f5f5" data-toggle="tab">Item</a>
<a data-bind="attr:{href:'#entitymemberssearch' + $index(),'data-index':$index}" style="background-color: #f5f5f5" class="btn " data-toggle="tab">Member</a>
</div>
<div class="tab-content">
<div class="tab-pane fade in " data-bind="attr:{id:'entitysearchitem' + $index()}">
<div class="row padding3centt">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-11">
<ul data-bind="foreach:interests" class="list-styled">
<li>
<span class="fontsize80" data-bind="text:Description">
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" data-bind="attr:{id:'entitymemberssearch' + $index()}">
Hello i am entitymemberssearch
</div>
</div>
<br/>
</div>
JS:
var myObject = [{
"first": "John",
"interests": [ {"Description": "Reading"}, {"Description":"Mountain Biking"}, {"Description":"Hacking"} ]
},
{
"first": "Boy",
"interests": [ {"Description":"Reading"}, {"Description":"Mountain Biking"}, {"Description":"Hacking"} ]
}]
var koData ={
arrayItems :ko.observableArray()
}
ko.mapping.fromJS(myObject, {}, koData.arrayItems);
ko.applyBindings(koData, $("#tabtest").get(0));
I have described the problem in the picture below as well. Any ideas on how to correctly get the bootstrap radio tabs to work?
You need to reconsider the approach you are trying to use : Here's a beautiful solution by Ryan Niemeyer which you can refer to..
http://jsfiddle.net/rniemeyer/cGMTV/
You need to rewrite your code in following format.
var Section = function (name, selected) {
this.name = name;
this.isSelected = ko.computed(function() {
return this === selected();
}, this);
}
var ViewModel = function () {
var self = this;
self.selectedSection = ko.observable();
self.sections = ko.observableArray([
new Section('Section 1', self.selectedSection),
new Section('Section 2', self.selectedSection),
new Section('Section 3', self.selectedSection)
]);
//inialize to the first section
self.selectedSection(self.sections()[0]);
}
ko.applyBindings(new ViewModel());

Categories