I am getting some issue while working with ionic framework. I am trying to work on Grocery app Where user can add items. The code which I have written doesn't work showing "undefined" with blank field and But when I replace "ion-content" tag with "div" tag then My code works fine. I am confused why is this happening? Please help Thanks.
<ion-content>
<div class="grocery-wrapper">
<ion-item ng-repeat="groceryItem in groceryItems">
<div class="row">
<div class="col col-20">
<label class="checkbox checkbox-balanced">
<input class="checkbox" type="checkbox"/>
</label>
</div>
<div class="col col-33 g-items">{{groceryItem.itemName}}</div>
<div class="col g-items">{{groceryItem.Quantity}}</div>
<div class="col g-items">{{groceryItem.Rate}} rs/kg</div>
</div>
</ion-item>
<div id="getGroceryItem" ng-show="GroceryItem">
<div class="row">
<div class="col col-50">
<label class="item item-input item-floating-label">
<span class="input-label">Grocery Item</span>
<input ng-model="gItem" type="text" placeholder="Grocery Item">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<span class="input-label">Kg</span>
<input ng-model="gKg" type="text" placeholder="kg">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<span class="input-label">Price</span>
<input ng-model="gPrice" type="text" placeholder="Price">
</label>
</div>
</div>
<div class="row">
<button class="button button-block button-balanced button-medium" ng-click="addGroceryItem()">
ADD ITEM
</button>
</div>
</div>
</div>
</ion-content>
app.controller('getGrocery', function($scope){
//console.log("Grocery Items");
$scope.groceryItems = [
{
'itemName':'Rice',
'Quantity':'5kg',
'Rate':'50'
},
{
'itemName':'Wheat',
'Quantity':'6kg',
'Rate':'44'
}
];
//Hide show elemment
$scope.GroceryItem = false;
$scope.addGroceryItem = function() {
//$scope.groceryObj = {};
$scope.groceryItems.push(
{
itemName:$scope.gItem,
Quantity:$scope.gKg,
Rate:$scope.gPrice
}
);
console.log($scope.gItem)
console.log($scope.gKg)
console.log($scope.gPrice)
$scope.gItem = "";
$scope.gKg = "";
$scope.gPrice = "";
}
})
http://i.stack.imgur.com/1at2T.png
As per reference http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
Angular Scopes and Prototypes.
AngularJS will often create child scopes inside of directives, for the same reasons we saw above: it allows a directive to have it’s own space for key/value pairs, without messing with higher level data. Child scopes inherit from parent scopes using prototypal inheritance. (There is an exception for isolated scopes);
But we often do want to transparently write to a higher level scope, and this is where the “dot rule” comes in. Let’s see how that is applied.
Do not do this
// Controller
$scope.gItem = "Test"
// HTML
<input ng-model="gItem">
That is bad because we can’t write to it from a child scope, because a child scope uses prototypal inheritance. Once you write to gItem from a child scope, it would become a distinct value in that child scope, and no longer refer up to the parent’s gItem.
Instead, do this
// Controller
$scope.newItem = {
gItem: "",
gKg: "",
gPrice: "",
}
// HTML
<input ng-model="newItem.gItem">
The difference is we are not storing the data directly on the scope. Now when ng-model wants to write, it actually does a read, then write. It reads the newItem property from the scope, and this will work from a child scope because a child scope will search upwards for a read. Once it finds newItem, it writes to newItem.gItem, which is no problem. It just works
Index.html should be
<body ng-app="grocery">
<ion-pane ng-controller="getGrocery">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title text-center">Grocery</h1>
<button class="button" ng-click="GroceryItem=!GroceryItem" ng-class="{active:GroceryItem}">
<i class="icon ion-android-add"></i>
</button>
</ion-header-bar>
<ion-content class="grocery-wrapper">
<ion-list>
<ion-item ng-repeat="groceryItem in groceryItems">
<div class="row">
<div class="col col-20">
<label class="checkbox checkbox-balanced">
<input class="checkbox" type="checkbox"/>
</label>
</div>
<div class="col col-33 g-items">{{groceryItem.itemName}}</div>
<div class="col g-items">{{groceryItem.Quantity}}</div>
<div class="col g-items">{{groceryItem.Rate}} rs/kg</div>
</div>
</ion-item>
<ion-item id="getGroceryItem" ng-show="GroceryItem">
<div class="row">
<div class="col col-50">
<label class="item item-input item-floating-label">
<span class="input-label">Grocery Item</span>
<input ng-model="newitem.gItem" type="text" placeholder="Grocery Item">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<span class="input-label">Kg</span>
<input ng-model="newitem.gKg" type="text" placeholder="kg">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<span class="input-label">Price</span>
<input ng-model="newitem.gPrice" type="text" placeholder="Price">
</label>
</div>
</div>
<div class="row">
<button class="button button-block button-balanced button-medium" ng-click="addGroceryItem()">
ADD ITEM
</button>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
app.js should be
app.controller('getGrocery', function($scope){
//console.log("Grocery Items");
$scope.groceryItems = [
{
'itemName':'Rice',
'Quantity':'5kg',
'Rate':'50'
},
{
'itemName':'Wheat',
'Quantity':'6kg',
'Rate':'44'
}
];
//Hide show elemment
$scope.GroceryItem = false;
$scope.newitem = {
gItem: "",
gKg: "",
gPrice: "",
}
$scope.addGroceryItem = function() {
//$scope.groceryObj = {};
console.log($scope.newitem.gItem)
console.log($scope.newitem.gKg)
console.log($scope.newitem.gPrice)
$scope.groceryItems.push(
{
itemName:$scope.newitem.gItem,
Quantity:$scope.newitem.gKg,
Rate:$scope.newitem.gPrice
}
);
$scope.newitem = {
gItem: "",
gKg: "",
gPrice: "",
}
}
});
Related
By far the weirdest problem encountered to date: I am populating a table using #foreach (var item in Model) and every row has an edit and delete button.
The edit button triggers a modal where the user can make changes and click the Save button to save any changes. It works perfectly on every row except the first row.
Let's say I have 2 records in the table with IDs 1 & 2. I can edit 2 but not 1 where 1 is on the first row of the table. If I delete 1 leaving only 2 (now obviously at the top), I can't edit that so it is not related to the data in the item but somehow related to the fact that it is the first item being loaded into the table.
The view is returning with an enormous URL which includes a __RequestVerificationToken and there is no POST action recorded in the network.
This is the code in the Index.cshtml which calls the modal:
<td style="text-align: center">
<a asp-action="Edit" data-bs-toggle="modal" data-bs-target=" #("#editNode-" + item.Id)">
<i class="fas fa-edit" ></i>
</a>
#await Html.PartialAsync("_EditNodePartialView", item)
</td>
This is the _EditNodePartialView markup and code:
#model UnidAdmin.Models.BundleNodeViewModel
<div class="modal fade" id="editNode-#Model.Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Edit Node #Model.Id Bundle #Model.BundleId</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Nodes" asp-action="Edit" asp-route-id="#Model.Id" asp-route-src="bndlnd" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row pb-3">
<div class="col form-group text-start">
<label asp-for="Name" class="control-label text-start" style="color:darkorange">Node Name</label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="col form-group text-start">
<label asp-for="Comment" class="control-label text-start" style="color:darkorange"></label>
<input asp-for="Comment" class="form-control" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
</div>
<div class="row pb-3">
<div class="col form-group form-check text-center">
<label class="form-check-label text-start" style="color:darkorange">
<input class="form-check-input" asp-for="IsTest" /> #Html.DisplayNameFor(model => model.IsTest)
</label>
</div>
<div class="col form-group form-check text-center">
<label class="form-check-label text-start" style="color:darkorange">
<input class="form-check-input" asp-for="IsLocked" /> #Html.DisplayNameFor(model => model.IsLocked)
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" onclick="displayBusyIndicator()" data-bs-dismiss="modal">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
And this is the controller edit action method:
public async Task<IActionResult> Edit(int id, [FromForm]Node editnode, string src)
{
// Lots of code here //
return RedirectToAction(nameof(Index));
}
As I said, it hits the controller for every row except the first row, whatever the record.
Has anyone ever encountered anything like this and if so what was your solution?
I am using bootstrap 4, jQuery 3.3.1 and datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
I have three issues:
The Calendar icon is not the size of the input box
When submit without selecting the date, bootstrap validation message not working.
Auto close is not working.
$(document).ready(function()
{
$('#depositeDate').datepicker({
"setDate": new Date(),
"autoclose": true
});
})
<div class="form-group row">
<label for="depositeDate" class="col-sm-4 col-form-label col-form-label-lg">Deposit Date</label>
<div class="col-sm-2 input-group date">
<input type="text" class=" text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon">
<i class="fas fa-calendar-alt fa-3x" style="color:RED"></i> </div>
<div class="invalid-feedback">
Please enter a valid Order Number.
</div>
</div>
</div>
The Calendar icon is not the size of the input box
The markup for input group addon is changed in Bootstrap 4.0 stable
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">#example.com</span>
</div>
</div>
Your code should be
<div class="input-group date" >
<input type="text" class="form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><span class="fa fa-calendar"></span></span>
</div>
</div>
3.Auto close is not working.
I don't see setting like "autoclose": true , we should explicitly call to close the datepicker.
.on('changeDate', function(ev) {
checkout.hide();
})
<div class="form-group row justify-content-center align-items-center">
<label for="depositeDate" class="col-sm-3 col-form-label">Deposit Date</label>
<div class="col-sm-3 input-group date" >
<input type="text" class="text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon" style="cursor: pointer;" onclick="$('#depositeDate').focus();">
<i class="fas fa-calendar-alt fa-2x"></i>
</div>
</div>
</div>
this code will do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<br>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label for="Order number">Order number</label>
<input type="text" id="Order number" >
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<label for="male">Deposit Date</label>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script>$(function() {
$('#datetimepicker1').datetimepicker();
});</script>
check out the fiddle:https://jsfiddle.net/rqy7L2do/
I have a login page. Its fixed now, but I want to enable scroll when I focus on any of one text box. How to do it?
<ion-view>
<ion-content class="background">
<div class="loginscreen">
<div class="row">
<div class="col-80 col-offset-10">
<div class="appheader-frame">
<span>
<img src="img/clock.png" alt="clock" class="clockwidth"></img>
</span>
<h1 class="timesheettext">
<b>Timesheet Tracking</b>
</h1>
</div>
</div>
</div>
<div class="row">
<div class=" formpadding col-80 col-offset-10">
<form novalidate name="loginForm" ng-submit="doLogin(loginForm)">
<label class="item item-input labelusername">
<i class="icon placeholder-icon"><img src="img/user.png" alt="" style="width:20px;height:20px;"/></i>
<input name="UserName" type="text" ng-model="User.UserName" placeholder="Username or Email" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.UserName.$error.required && loginSubmitted" class="usernameerror">
Please provide username
</p>
<label class="item item-input labelpassword">
<i class="icon placeholder-icon"><img src="img/password.png" alt="" style="width:20px;height:20px;"/></i>
<input type="password" name="password" id="password" ng-model="User.Password" placeholder="Password" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.password.$error.required && loginSubmitted" class="usernameerror">
provide Password
</p>
<p ng-show="myflag">
wrong credentials
</p>
<button class="button button-block button-lightgreen" type="submit">
<p class="login">
<b>submit</b>
</p>
</button>
</form>
</div>
</div>
</div>
<div class="bar bar-footer bar-inherit myfooter hide-on-keyboard-open">
<div class="title">
<p id="footer" class="byxyz" ng-show=footerflag>By xyz Software Pvt Ltd</p>
</div>
</div>
</ion-content>
</ion-view>
Is that possible in ionic framework? Then how to do it? Please explain.And don't remove anything in the page and don't add anymore details to make it scroll.I simply want to enable scroll in it but the page should be same as it is right now
simply added overflow-scroll="false" in ion-content.
<ion-content class="background" overflow-scroll="false" >
//code
</ion-content>
<ion-view>
<div class="bar bar-header bar-dark">
<h1 class="title">Welcome</h1>
</div>
<ion-content class="has-header">
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</label>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
why the button(获取验证码) inside label tag doesnt work?
but the button(登 陆) outside label tag work fine, why?
please help me to fixed this. I need to make a response when click
the button(获取验证码)
working demo
The solution is simply not to use a label for the item. Instead just use a div
html
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<!-- <input ></input> -->
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</div>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
I have the following content in ionic.
<ion-content>
<div class="row row-center">
<div class="col-150 col-offset-50"><h4>Login</h4></div> </div>
<div class="row">
<div class=" col-10 col-offset-50"><h4>Username</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="text" placeholder="Username" ng-model="username">
</label></div>
</div>
<div class="row row-bottom">
<div class=" col-10 col-offset-50"><h4>Password</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
</div>
</ion-content>
The output looks like this:
I am new to ionic and would really appreciate some help in
1)space between the two rows for username and password
2)Aligning both the username and password rows a little more to the left so that the Login row looks centered.
Why don't you use inline labels?
To align all labels to center, add text-center class to your labels.
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label text-center">Login</span>
</label>
<label class="item item-input">
<span class="input-label text-center">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label text-center">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To centrally align just 'Login' label, add text-center just to that label
<ion-content>
<div class="list">
<label class="item text-center">
Login
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To add space between items, add margin-bottom to .input-label class. Don't do this in the original ionic css file - create another stylesheet to contain all your overrides.