I am trying to implement different dates using datepicker in my application. I have a checkbox box if user checks that check box then am adding the dates.
But it seems track by index is not working.
Here is my code-
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label> <br>
<div ng-repeat="selecting in selects track by $index" >
<div class="datePicker">
<button
bs-datepicker
class="btn btn-info" id="comm_cal_bttn"
name="date"
data-animation="am-flip-x"
data-autoclose="true"
ng-blur="getMinTime(index);"
ng-model="selects[index].commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<p ng-show="selects[index].commDate">
{{selects[index].commDate}} <span class="text-muted"> {{selects[index].commDate}}</span> {{combinedTime.format('h:mm A')}}
</p>
</div>
<input type="checkbox" ng-click="addMore(keyAdd);" ng-model="keyAdd">
<label for="dateCheck">Add Additional</label>
</form>
above code on selecting a date am calling a function getMinTime(index) but index is showing undefined in my controller.
My controller-
$scope.selects = [{commDate : null}];
$scope.getMinTime = function(index){
// here index is showing undefined
}
I want to perform some operation based on the index value. Suppose I added 4 dates. What am I doing here here? Any suggestion?
You need to pass $index as a parameter not index
<!-- other code -->
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label>
<br>
<div ng-repeat="selecting in selects track by $index">
<div class="datePicker">
<button bs-datepicker class="btn btn-info" id="comm_cal_bttn" name="date" data-animation="am-flip-x" data-autoclose="true" ng-blur="getMinTime($index);" ng-model="selects[$index].commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<p ng-show="selects[$index].commDate">
{{selects[$index].commDate}} <span class="text-muted"> {{selects[$index].commDate}}</span> {{combinedTime.format('h:mm A')}}
</p>
</div>
<input type="checkbox" ng-click="addMore(keyAdd);" ng-model="keyAdd">
<label for="dateCheck">Add Additional</label>
<!-- other code -->
Related
Angularjs splice from an array of images for input type file always remove last element from html view -
<div class="mt-1" ng-repeat="plan in data.images.Projects track by $index">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="images" ng-model="data.banner_image"
ng-value="$index" />
</span>
<input type="file" file-model="data.images.Projects[$index]"
class="form-control" accept="image/x-png,image/jpeg">
<span class="input-group-btn" ng-click="data.images.Projects.splice($index,1)">
<button class="btn white" type="button">
<span class="fa fa-minus-square"></span>
</button>
</span>
</div>
I have problem with ng-repeat and [$index]. My problem is that I would like values from all inputes (look on fiddle and click "+") store in one array and next save in database. The problem is at the very beginning that I can't insert inputs values in one array (first array isn't insert into array). I try use:
ng-repeat="input in inputs track by $index"
fiddle:
https://jsfiddle.net/j6uwhb6v/4/
It's not working because the first input is outside of the ng-repeat so it doesn't have an $index... Here's a simple fix:
HTML:
<div ng-app="productController" ng-controller="productCtrl" class="row-fluid">
<div class="col-md-12">
<div class="form-group">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">
<i class="fa fa-pencil"></i>
</div>
<input ng-disabled="product.disabled" type="text" ng-model="description[0]" name="description" class="form-control" placeholder="Description..." required>
<div class="input-group-addon">
<a ng-click="addfield()" class="add-field">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div ng-repeat="item in inputs track by $index">
<div class="input-group mb-2 mr-sm-2 mb-sm-0 repeat-input">
<div class="input-group-addon">
<i class="fa fa-pencil"></i>
</div>
<input ng-disabled="product.disabled" type="text" name="description" ng-model="description[$index+1]" class="form-control" placeholder="Description..." required>
</div>
</div>
</div>
</div>
{{description}}
</div>
JavaScript:
$scope.inputs = [];
$scope.addfield = function(){
$scope.inputs.push({})
}
$scope.description = [];
Working Code: JSFiddle
I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>
In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.
You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");
I'm trying to select the input element but it doesn't seem to work.
HTML:
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
jQuery:
$("#c1").find("input");
I'm trying to select this:
<input type="text" readonly class="form-control"/>
It works fine for me :
When I use this HTML...
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
... and this JS...
var $InputElement = $("#c1").find("input");
console.log($InputElement);
... the console returns precisely the input element you're looking for.
Well, actually, it returns a jQuery object that contains the element you're looking for.
If you want the DOM element itself instead of a jQuery object, just do this :
var InputElement = $("#c1").find("input")[0];
console.log(InputElement);
You can try it yourself in this Fiddle.
I'm not able to bind time which I'm setting in the controller like this
$scope.info.startTime="12:10:03";
This is my time picker control in HTML
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" tabindex="5"
ng-model="info.startTime" placeholder="hh:mm"
is-open="datepickerOpened1"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="openStartTime($event, 'time')">
<i class="glyphicon glyphicon-time"></i>
</button>
<div dropdown is-open="timepickerOpened1">
<span class="dropdown-menu" role="menu">
<timepicker ng-model="info.startTime" show-meridian="true"></timepicker>
</span>
</div>
</span>
</span>
Reference:Angular Bootstrap
You need to set date object in ng-model instead of string.
Change
$scope.info.startTime="12:10:03";
To
var d = new Date();
d.setHours(12);
d.setMinutes(10);
$scope.info.startTime=d;