ion-content scroll="true" not working - angularjs

Issue: I have a simple add item form that adds a picture from the phone's album in a view. For some reason, after adding ion-content scroll="true", the page still doesn't allow for scrolling.
Also, I've set $ionicScrollDelegate to refresh in the controller. Thanks!
<ion-view title="Add Item">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<!-- <ion-scroll direction="y" style="height: 800px;"> -->
<ion-pane>
<div class="row">
<div class="col text-center">
<button class="button button-calm" ng-click="getPhoto()"><i class="ion-camera"></i> Select Photo</button>
</div>
</div>
<div class="list card" ng-show="item.pic">
<div class="item">
<img class="full-image" src="data:image/jpg;base64,{{item.pic}}">
</div>
</div>
<form ng-submit="submitItem()" name="newItemForm" novalidate>
<label class="item item-input">
<span class="input-label" type="text">* Designer: </span>
<input type="text" ng-model="item.designer" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Type/Collection: </span>
<input type="text" ng-model="item.collection" ng-required="true">
</label>
<p ng-show="newItemForm.item.collection.$error.required">Type/Collection Required</p>
<label class="item item-input">
<span class="input-label" type="text">* Color: </span>
<input type="text" ng-model="item.color" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Size: </span>
<input type="text" ng-model="item.size" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">Material: </span>
<input type="text" ng-model="item.material">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Condition: </span>
<input type="text" ng-model="item.condition" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Description: </span>
<textarea type="text" ng-model="item.description" ng-required="true"></textarea>
</label>
<p ng-show="newItemForm.$invalid" class="warning">*Items must be filled in to Add Item</p>
<div class="row">
<div class="col text-center">
<button type="submit" class="button button-balanced" ng-disabled="newItemForm.$invalid"><i class="ion-plus"></i> Add Item</button>
</div>
</div>
</form>
</ion-pane>
<!-- </ion-scroll> -->
</ion-content>
</ion-view>

Related

Ionic form validations

I have created a simple form in ionic 1 but validations are not working correctly. Even though I have mentioned "required" in input field, it doesn't give required popup nor does "ng-show" display anything.
View.html:
<ion-view class="forms-view">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-title>
<span>Index Card</span>
</ion-nav-title>
<ion-content ng-controller="ValidationCtrl">
<div class="list card">
<form name="indexcard" class="list" novalidate>
<div class = "item">
<label class="item item-input item-stacked-label" name="dov" style="border-bottom: solid 1px #ccc;">
<i id="iconcolor" class="icon ion-calendar"></i> <span class="input-label" style="color:#ffab00">Date</span>
<input type="date">
</label>
<label class="item item-input" name="patientname" style="border-bottom: solid 1px #ccc;">
<i id="iconcolor" class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="Patient Name" ng-model="patientname" required />
<span ng-show="indexcard.patientname.$error.required">The Patient Name is required.</span>
</label>
<label class="item item-input" name="sdwname" style="border-bottom: solid 1px #ccc;">
<i id="iconcolor" class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="S/W/D" ng-model="sdwname" required/>
<span ng-show="indexcard.sdwname.$touched && indexcard.sdwname.$invalid">The name is required.</span>
</label>
<center>
<button type="submit" class="button button-dark" ng-click="submit(patientname)">
Submit
</button>
</center>

How to add the dynamic textbox value in angular js using onblur or onchange event

[![Please find my screen shot]
[!1]]]
1
<div style="background-color:#FFFFFF;min-height:color:#FFFFFF">
<div style="background-color:#FFFFFF;height:40px;" > </div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[0].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[0].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[1].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[1].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[2].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[2].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[3].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[3].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[4].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[4].cost">
</label>
</div>
</div>
<div class="row" data-ng-repeat="rowContent in rows">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[rowContent].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[rowContent].cost">
</label>
</div>
</div>
<div class="row">
<div class="col" align="center"> </div>
<div class="col col-75" align="right"> <i class="font25 icon ion-ios-plus-outline" ng-click="addRow()"></i> <i class="font25 icon ion-ios-minus-outline" ng-click="deleteRow($index)"></i></div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" readonly value="Labour Charges">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.labourcost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" readonly value="Service Charges">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.servicecost">
</label>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-balanced">{{thingstodo[0].cost + thingstodo[1].cost + thingstodo[2].cost + thingstodo[3].cost + thingstodo[4].cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}.00 RS</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-dark" ng-click="collectData()">Confirm</button>
</div>
</div>
</div>
I want to add the {{thingstodo[0].cost + thingstodo1.cost + thingstodo[2].cost + thingstodo[3].cost + thingstodo[4].cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}} and also want to add the dynamic textbox value {{ thingstodo[rowContent].cost }}
Create a Filter as follows
angular.module('app', []).filter('totalCost', function() {
return function(inputs) {
var sum = 0;
angular.forEach(inputs,function(v,k){
sum = sum + parseInt(v.cost);
});
return sum ;
};
});
Then use the following expression
{{(thingstodo|totalCost) + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}

how to show the current value after delete the dynamic row in ionic with angular js

While I delete the dynamic row it should recollect the cost feild value and show the exact value in green color button using angular js.Please find the image.
<div style="background-color:#FFFFFF;min-height:color:#FFFFFF">
<div style="background-color:#FFFFFF;height:40px;" > </div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[0].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[0].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[1].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[1].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[2].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[2].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[3].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[3].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[4].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[4].cost">
</label>
</div>
</div>
<div class="row" data-ng-repeat="rowContent in rows" show-delete="false" can-swipe="true">
<div class="col col-50">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[rowContent].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[rowContent].cost">
</label>
</div>
<div class="col" align="center" style="padding-top:15px">
<i class="font25 icon ion-ios-trash" ng-click="deleteRow($index,rowContent)"></i>
</div>
</div>
<div class="row">
<div class="col" align="center"> </div>
<div class="col col-75" align="right"><button class="button icon ion-ios-plus-outline" ng-click="addRow()"></button></div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" readonly value="Labour Charges">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.labourcost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" readonly value="Service Charges">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.servicecost">
</label>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-balanced">{{(thingstodo|totalCost : type ) + thingstodo_additional.labourcost + thingstodo_additional.servicecost}}.00 RS</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-dark" ng-click="collectData()">Confirm</button>
</div>
</div>
$scope.rows = []; // rows array
$scope.counter = 5;
$scope.addRow = function()
{
$scope.rows.push($scope.counter);
$scope.counter++;
}
$scope.deleteRow = function(index,rowContent)
{
$scope.type = $scope.thingstodo[rowContent].cost;
$scope.rows.splice(index, 1);
}`
My recommendation would be to move the maths into your controller:
<button class="button button-block button-balanced">{{(getTotalCost()}}.00 RS</button>
$scope.getTotalCost = function()
{
var total = 0;
angular.forEach(function(value, key)
{
total += $scope.thingstodo[key].cost;
});
return total + $scope.thingstodo_additional.labourcost + $scope.thingstodo_additional.servicecost;
}
Or something very similar. Then add any filter / formatting of the number you want back in.
The method will be called just as often as an other change to the view.

add the text value in angular js using onblur or onchange event

<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[0].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[0].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[1].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[1].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[2].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[2].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[3].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[3].cost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[4].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[4].cost">
</label>
</div>
</div>
<div class="row" data-ng-repeat="rowContent in rows">
<div class="col col-75">
<label class="item item-input">
<input type="text" placeholder="Material Name" ng-model="thingstodo[rowContent].mname">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo[rowContent].cost">
</label>
</div>
</div>
<div class="row">
<div class="col" align="center"> </div>
<div class="col col-75" align="right"> <i class="font25 icon ion-ios-plus-outline" ng-click="addRow()"></i> <i class="font25 icon ion-ios-minus-outline" ng-click="deleteRow($index)"></i></div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" readonly value="Labour Charges">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.labourcost">
</label>
</div>
</div>
<div class="row">
<div class="col col-75">
<label class="item item-input">
<input type="text" readonly value="Service Charges">
</label>
</div>
<div class="col">
<label class="item item-input">
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="thingstodo_additional.servicecost">
</label>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-balanced">0.00 RS</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-dark" ng-click="collectData()">Confirm</button>
</div>
</div>
I want to add the {{thingstodo[0].cost + thingstodo[1].cost + thingstodo[2].cost + thingstodo[3].cost + thingstodo[4].cost + thingstodo_additional.labourcost + thingstodo_additional.servicecost}} and also want to add the dynamic textbox value {{ thingstodo[rowContent].cost }}
I'm not entirely sure what the question asking, but I shall try and give you an answer to help get the question.
If you are trying to simply add the costs as the numbers change - you don't need to use ng-change, you can have the numbers automatically computute using databinding:
See here: http://jsfiddle.net/AshCoolman/8qnxukuh/2/
I think that i know what you want.
Check this:
app.filter('range', function () {
return function (input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++)
input.push(i);
return input;
};
});
Html:
<input type="number" placeholder="Rs" ng-maxlength="4" ng-model="rows">
<div ng-repeat="row in [] | range: rows">
<input type="number" ng-model="thingstodo[$index].cost" />
</div>
Working demo: http://plnkr.co/edit/AbenOQGSSZyfCDVmd6ww

iPad radio button issue within ionic popover

I am using radio buttons in a popover to create a dropdown type filter for my app.
When I use an iPad the radio buttons go haywire! This works perfectly on every other device.
Best illustration is in this video
https://www.youtube.com/watch?v=Begkz4uS8hQ
Here is my code:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="item bar-header bar-positive">
<h2 class="title">Difficulty</h2>
</div>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="" name="group">
<div class="item-content">
All
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Easy" name="group">
<div class="item-content">
Easy
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Medium" name="group">
<div class="item-content">
Medium
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Hard" name="group">
<div class="item-content">
Hard
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Expert" name="group">
<div class="item-content">
Expert
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-popover-view>
</script>
And displayed using this:
<button class="button button-positive button-small col col-20 icon-left ion-connection-bars filter-button" ng-click="popover.show($event)">
{{filter.difficulty || 'All'}}
</button>
Many thanks to anyone who can help.

Resources