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
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>
[![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}}
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.
<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
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.