my fiddle here http://jsfiddle.net/prantikv/1nvdzv24/
i have my data form firebase like this
$scope.gotData={
"date": {
"date": "11/23/24"
},
"menuList": {
"item1": {
"val1": "a1",
"val2": "a2",
"val3": "a3"
},
"item2": {
"val1": "b1",
"val2": "b2",
"val3": "b3"
},
"item3": {
"val1": "c1",
"val2": "c2",
"val3": "c3"
}
}
}
i show the data on the screen where the user can edit like this:
<ul class="formContainer">
<li ng-repeat="(name,rates) in gotData.menuList" my-repeat-directive>
<label for="{{name}}">{{name}}</label>
<span ng-repeat="(rateType,val) in rates">
<input type="text" id="{{rateType}}" value="{{val}}">
</span>
</li>
</ul>
i have a button at the end
<button type="button" class="btn btn-warning" ng-click="updateData()">update Data</button>
what i want to do is that when the user clicks the update button the data gets updated in the corresponding node on firebase. i am only wanting an update not a set or remove in this case.
How do i do that?
Related
I am creating a ecommerce website and the data is being pulled from what will be an external JS file containing an array of all of the products.
I currently have a "sort" button and want to sort the books by their price which is a numerical value. Depending on the category that is selected, the books on the page should sort from high to low and low to high when the button is clicked.
I have done this in using SQL but never this way, any help is appreciated!
<div class="grid-x grid-padding-0">
<div class="medium-3 cell">
<div class="SubjectContainer">
<div class="float-left">
<div class="filterTitle" style="padding-left: 5px">Choose a subject</div>
<div class="filterctn">
<div class="optionctn">
<input type="checkbox" name="subject" value="accounting" id="accounting">
<label class="filterlabel" for="accounting">Accounting</label>
</div>
<div class="optionctn">
<input type="checkbox" name="subject" value="agriculture" id="agriculture">
<label class="filterlabel" for="business">Agriculture</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="filterTitle">Sort by Price<br>
<small style="padding-top: 10px">(highest to lowest)</small> </div>
<button class="sortBtn" onclick="sorted()">Sort</button>
</div>
Data
<script>
AllSubjects([{
"journalfilter": "accounting",
"journalorder": "1",
"journaltitle": "Accounting I",
"journalprice": "22",
},
{
"journalfilter": "accounting",
"journalorder": "2",
"journaltitle": "Accounting II",
"journalprice": "12",
},
{
"journalfilter": "agriculture",
"journalorder": "3",
"journaltitle": "Agriculture I",
"journalprice": "40",
},
{
"journalfilter": "agriculture",
"journalorder": "4",
"journaltitle": "Agriculture II",
"journalprice": "25",
},
{
"journalfilter": "agriculture",
"journalorder": "5",
"journaltitle": "Agriculture III",
"journalprice": "16",
},
]);
</script>
What about
/* Ascending */
yourArray.sort((a, b) => {
return parseInt(a.journalprice) - parseInt(b.journalprice);
});
/* Descending */
yourArray.sort((a, b) => {
return parseInt(b.journalprice) - parseInt(a.journalprice);
});
I would recommend, that you store the prices as numbers, more specifically integers (so store 1$ as 100), but not as string.
In the below code, i'm getting environments from localStorage which i had stored earlier and assigning it to $scope.environments. When the accessMethod is "A" then it should show button and when accessMethod is "B" it should show a dropdown.
<form accept-charset="UTF-8" role="form" name="loginForm" ng-controller="PostsCtrl" novalidate ng-submit="Onsubmit()" >
<fieldset>
<ul class="heroes" ng-repeat="environment in environments track by $index" >
<li ng-if="environment.accessMethod === 'A'">
<button type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
<span class="badge">{{environment.code}}</span>
</button>
</li>
<li ng-if="environment.accessMethod === 'B'">
<div class="btn-group" uib-dropdown >
<button type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
<span class="badge">{{environment.code}}</span> <span class="caret"></span><span class="sr-only"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" >
<li ng-repeat="roledetail in environment.roles"
ng-click="onSelect(roledetail.roleName)" >
<a href="" >{{roledetail.roleName}}</a>
</li>
</ul>
</div>
</li>
</ul>
</fieldset>
</form>
$scope.environments = localStorage.getItem("environments");
I kept the Json for understanding but i'm accessing it through localStorage.
$scope.environments = [{
"code": "abc",
"name": null,
"accessMethod": "A",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "B"
}
]
}, {
"code": "XYZ",
"name": null,
"accessMethod": "A",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "B"
}
]
}, {
"code": "Neo",
"name": null,
"accessMethod": "B",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "C"
}
]
}, {
"code": "LAB",
"name": null,
"accessMethod": "B",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "B"
}
]
}]
You are not doing Json.parse when assigning to your scope.
Do this
$scope.environments = JSON.parse(localStorage.getItem("environments"));
Use ng-show instead of if. ng-show changes the visibility of an element on the fly whereas ng-if decides whether that element should even be rendered or not.
So I'm kinda stuck at the 3rc select connected to previous select model.
First is you must select a branch and after that you can select the building name and on what floor.
vm.locations data
[
{
"_id": "5a61acfdd5df1761dd2eb1ef",
"branch": "Lucena City",
"__v": 0,
"building": [
{
"name": "mhq",
"floors": [
"1st",
"2nd",
"3rd"
]
}
],
"dateCreated": "2018-01-19T08:31:57.121Z"
},
{
"_id": "5a61ad6fd5df1761dd2eb1f1",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "mhq",
"floors": [
"ground floor",
"2nd floor",
"3rd floor",
"4th floor",
"5th floor"
]
}
],
"dateCreated": "2018-01-19T08:33:51.761Z"
},
{
"_id": "5a61ada1d5df1761dd2eb1f2",
"branch": "loperz",
"__v": 0,
"building": [
{
"name": "lope",
"floors": [
"ground floor",
"1st floor"
]
}
],
"dateCreated": "2018-01-19T08:34:41.904Z"
}]
html side
<div class="row justify-content-md-center">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" ng-model="vm.locationTest" class="form-control">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="ds as ds for ds in vm.locationTest.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
Selecting a branch works, After that I'm having trouble passing the data to the 2nd and 3rd select. I'm not really good at handling object data.
Looks like you have a typo here:
<select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
</select>
Specifically the vm.locationTest should be vm.locationTest.building and ds.building should be ds.name
So it will then be:
<select ng-options="ds as ds.name for ds in vm.locationTest.building" ng-model="vm.roomData.building" class="form-control">
</select>
Then, we'll also need to fix the 3rd ng-options:
vm.locationTest.floors becomes vm.roomData.building.floors
I have a radio button initially in the page which is saving selected item details with value as name.
<div data-bind="foreach: {data:customer ,as:'customerData'}, visible: customer().length > 0">
<label class="btn btn-primary active">
<input type="radio" name="optionsGroup" data-bind="attr: {value:name}, checked: $root.selected">
<span data-bind="text: customer.type"></span>
</label>
</div>
Then in the later page I want to show customer details of the selected item.
I am trying to do like below but I am not getting the desired results and all the objects in customer gets printed instead of selected one.
<div data-bind="foreach: {data:customer,as:'customerData'}, visible: customer().length > 0">
<div data-bind:"if:$root.selected() === customer.name">
<p data-bind="text:customer.name" class="w3-center"></p>
<p data-bind="text:customer.college" class="w3-center"></p>
<p data-bind="text:customer.school" class="w3-center"></p>
</div>
I tried to make a foreach with if condition but that does'nt solve the problem as i stated earlier in the post also the json file looks like this:
"customer": [{
"order": "01",
"name": "custom 1",
"type": "A1",
"school": "ABCDS",
"College": "university of florida"
},
{
"order": "02",
"name": "custom 2",
"type": "A2",
"school": "ABCDS",
"College": "university of new york"
}
]
I'm building a web app which has a form with many different types of questions. Now, I'm suffering with checkbox type of questions.
Here is the view:
<div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'checkbox'">
<label for="{{field.id}}">{{field.title}}</label>
<br>
<label ng-repeat="value in field.values"><input type="checkbox" id="{{field.id}}" name="field.id" ng-model="formData[field.id]"> {{value.title}}</label>
<p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>
<div ng-show="form.$submitted" ng-cloack>
<span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
</div>
</div>
Here is a JSON I'm rendering:
{
"id": "4_6_yes_no_question",
"title": "6. Do you qualify for this?",
"type": "checkbox",
"info": "If yes, check yes",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [
{
"id": 0,
"title": "Not Selected"
},
{
"id": 1,
"title": "Yes"
},
{
"id": 2,
"title": "No"
}
]
}
When my view is shown, it shows 3 checkboxes with different titles(not selected, yes, no). The problem is that when a user selects one of the boxes, it selects all. And the data being saved to localStorage is only true or false. Is it possible to save as the tile I have in JSON?
First of all, this is a Yes or No question. You cannot select both. So you need to make it Radio button.
Now you can add a value="{{field.id}}" to the input element so that you get to chose what value is stored in the ng-model. And initiate the ng-model at the the parent element of that section of your form using ng-init="formData[field.id]=0". It will make Not selected option ckecked by default.
A demo:
angular.module('theApp', []).controller('theCtrl', function($scope) {
$scope.field = {
"id": "4_6_yes_no_question",
"title": "6. Do you qualify for this?",
"type": "radio",
"info": "If yes, check yes",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [{
"id": 0,
"title": "Not Selected"
}, {
"id": 1,
"title": "Yes"
}, {
"id": 2,
"title": "No"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="theApp" ng-controller="theCtrl">
<div ng-init="formData[field.id]=0" class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'radio'">
<label for="{{field.id}}">{{field.title}}</label>
<br>
<label ng-repeat="value in field.values">
<input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.id}}">{{value.title}}</label>
<p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>
<div ng-show="form.$submitted" ng-cloack>
<span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
</div>
Selected Value is : {{formData[field.id]}}
</div>
</div>