Develop Reference

Angularjs Splice on File type Input field always remove last element

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>

Bootstrap Datetimepicker with dynamic mirror fields

I'm using http://www.malot.fr/bootstrap-datetimepicker/ and I have this snippet:
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
Please notice that the input[type=text] and the input[type=hidden] fields have the same id, but the latter with a _mirror suffix
Since I have a couple of datepickers in a page (i.e. also endDateTime and endDateTime_mirror), I can't use a 'fixed' mirror field id as in datetimepicker's demo page
EDIT: an example of two datetimepickers
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="endDateTime" id="endDateTime">
<input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
I tried this, but it doesn't work (even if the 'generated' name is right, startDateTime_mirror (I can see it in console.log()):
$(".form_datetime").datetimepicker({
autoclose: true,
format: "dd MM yyyy hh:ii",
linkField: ($(this).find('.form-control').prop('id')) + '_mirror',
linkFormat: "yyyy-mm-dd hh:ii"
})
Any help, please? Thanks

Why don't you try to put each couple of datepicker in a separate div that you would describe with an id:
<div class="input-group date form_datetime" id="startBlock">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date form_datetime" id="endBlock">
<input type="text" class="form-control" name="endDateTime" id="endDateTime">
<input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<script type="text/javascript">
$("#startBlock").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "startDateTime_mirror",
linkFormat: "yyyy-mm-dd hh:ii"
});
$("#endBlock").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "endDateTime_mirror",
linkFormat: "yyyy-mm-dd hh:ii"
});
</script>

Track by $index in AngularJS

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 -->

Uib datepicker ng-change not firing on date selection

I'm trying to trigger a call to a function on change of the date in the uib datepicker however the ng-change attribute doesn't seem to be getting applied. I've tried using a watcher but since we're not using $scope in our controller I haven't been able to find a solution that works with that method. See code below:
<span class="input-group">
<span class="input-group-btn">
<button class="btn btn-default"
data-test="start-date-button"
ng-click="startDateIsOpen = !startDateIsOpen"
type="button">
<i class="fa fa-calendar"></i>
<span class="sr-only" translate>{{::'datePicker.openDatePicker'}}</span>
</button>
</span>
<input class="form-control"
is-open="startDateIsOpen"
name="startDate"
ng-attr-aria-describedby="{{conditionsController.showError(conditionsController.newConditionAttributes, 'startDate') ?
'new-condition-start-date-errors' : undefined}}"
ng-change="conditionsController.setMinStartDate(conditionsController.newCondition.editCondition.startDate)"
ng-model="conditionsController.newCondition.editCondition.startDate"
ng-required="conditionsController.newCondition.editCondition.startTime"
popup-placement="top-left"
type="text"
uib-datepicker-popup="{{dateFormat}}"/>
</span>
Any ideas on why this wouldn't be working?

jQuery can't find element

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.