I am new to AngularJS and trying to implement multi date time picker functionlity with one check box .
I am using multiple-date-picker
multiple-date-picker
and here I am trying to change the time of the date I have picked and want the two values(date with changes time and the check box value) in one new array
right now when I am trying to iterate the array I am getting and pushing the array value to the new array but nothing is working
below is the code
<div class="col-sm-9">
<div class="input-group">
<multiple-date-picker ng-model="myArrayOfDates"></multiple-date-picker>
</div>
</div>
<div class="form-group booking-groups" ng-repeat="m in myArrayOfDates">
<div class="col-sm-3 text-right">
<label>{{m| cmdate:'EEEE, d MMM yy' }} Time</label>
</div>
<div class="col-sm-5">
<div class="input-time" width="50%">
<div uib-timepicker ng-model="myArrayofTimes" ng-init="LoadTimes(m)" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" required></div>
</div>
</div>
<div class="col-sm-4">
<div >
<div class="input-time" width="50%">
<label>Allow Multiround Booking</label>
<div><input type="checkbox" ng-model="checkboxModel"></div>
</div>
</div>
</div>
JavaScript:
$scope.myArrayOfDates = [];
$scope.myArrayofTimes = [];
$scope.checkboxModel = [{}];
$scope.myFinalArray=[];
$scope.LoadTimes = function (datentime) {
alert(datentime);
for (var i = 0; i < $scope.myArrayOfDates.length; i++) {
alert($scope.myArrayOfDates.length);
alert($scope.myArrayofTimes.length);
$scope.myArrayofTimes[i] = $scope.myArrayofDates[i];
$scope.myArrayofTimes[i] = datentime;
}
}
Please advice.
I'm not exactly sure what you want, but please see below findings.
Just check this for loop.
for (var i = 0; i < $scope.myArrayOfDates.length; i++) {
alert($scope.myArrayOfDates.length);
alert($scope.myArrayofTimes.length);
$scope.myArrayofTimes[i] = $scope.myArrayofDates[i];
$scope.myArrayofTimes[i] = datentime; //Something is wrong with this
}
You are first assigning value to $scope.myArrayofTimes[i]. And on the next step again overriding this value with datentime.
Related
JS :
var populateRecord = function(data) {
var chunk = 40;
$scope.users = [];
console.log(data.length + "hi");
for (var i = 0; i < data.length; i += chunk) {
console.log("inside for");
// userCount++;
$scope.users.push(data.slice(i, i + chunk));
// console.log(temp);
}
console.log($scope.users)
};
HTML :
<div ng-repeat="record in users track by $index">
<div class="col-md-2 col-sm-2 col-xs-2">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-change="userSelectedToggle()" ng-checked="isAllRecordSelected(record)">
</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="text-overflow">
<span ng-model="record.dispalyName">{{record.displayName}}</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span ng-model="record.mobile"> {{record.mobile}}</span>
</div>
</div>
Output on console after 'populateRecord '
2 inside for
2[array(40) ,array(7)]
Now first I want to show 40 elements and after clicking on button ONLY second array should display on screen. Any solution ?
You just have to keep a counter and increment the index of users array by one on click of the button publish and store it in a new array which will be used for rendering the UI.
JS:
var counter=0;
$scope.sendBulkMessages=function(){
counter=counter +1;
//do your calculations with $scope.parent before assigning it to next 40 elements
$scope.parent=$scope.users[counter];
console.log($scope.parent);
}
Fiddle: http://jsfiddle.net/brtmzqLk/3/
I been wondering if someone fixed my issue. my code looks like this.
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.checks = [{checkNum1: '',checkAmt1:''}];
$scope.add = function() {
var newCheckNo = $scope.checks.length+1;
$scope.checks.push({['checkAmt'+newCheckNo]:''});
};
$scope.tot = function() {
return $scope.checks;
};
$scope.total = function() {
var value = "";
for(var i =0 ; i<=$scope.checks.length;i++ ){
value += $scope.checks.get('checkAmt1');
}
return value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="check in checks">
<div class="form-group">
<label>check Amount:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="{{'id'+($index+1)}}" ng-model="check['checkAmt'+($index+1)]" maxlength="6" />
</div>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<!--<p ng-repeat="check in checks">{{check['checkAmt'+($index+1)]}}</p>-->
</div>
<label>{{tot()}}</label>
<label>{{total()}}</label>
</div>
I am initializing $scope.checks = [{checkAmt1:''}];
and pushing the additional values on clicking Add Button (checkAmt2,checkAmt3,...so on). i want to add those values(checkAmt1+checkAmt2+...so on) dynamically by using {{total()}}. total() function is calling, i know logic inside the for loop is wrong. Please help me to fix the logic (or) Suggest me if any other way to add those values.
Thanks in advance.
Note: please refer the result in full page view.
first of all, it is not a proper way of using an array.
You can sum up column with same name and not dynamic name.
I think to make the entries distinct you have used in such manner. But it is not the good way and will make your operation on array complicated.
You can try to construct array in following way,
$scope.checks = [{id:'',checkNum: '',checkAmt:''}];
The complete changed code will look like
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.checks = [{id:'', checkAmt:''}];
$scope.add = function() {
var newCheckNo = $scope.checks.length+1;
$scope.checks.push({'id':newCheckNo ,'checkAmt':''});
};
$scope.tot = function() {
return $scope.checks;
};
$scope.total = function() {
var value = 0;
for(var i =0 ; i<$scope.checks.length;i++ ){
value += parseInt( $scope.checks[i].checkAmt);
}
return value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="check in checks">
<div class="form-group">
<label>check Amount:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="{{'id'+($index+1)}}" ng-model="check['checkAmt']" maxlength="6" />
</div>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<!--<p ng-repeat="check in checks">{{check['checkAmt']}}</p>-->
</div>
<label>{{tot()}}</label>
<label>{{total()}}</label>
</div>
I'm not sure why indeed you push into the array such objects, and not just numbers, but as you iterate over it - you can just access each value by index, then take the correct object's value:
for(var i =0 ; i<=$scope.checks.length;i++ ){
value += $scope.checks[i]['checkAmt' + i];
}
I have an angularjs sample here where I used ng-repeat as
<div ng-app="Test">
<div ng-controller="TestController">
<div ng-repeat="str in myData">{{str.id}}. {{str.string}}</div>
<br/> <span ng-if="myData.length > 1" style="color:red;">One or more string is empty</span>
</div>
</div>
to draw the list from an array. I want to show an validation if there are one or more value pf string in the array is empty. How can I achieve it?
You can iterate the array in your controller and increment a variable say count when your string is empty. Based on that count value you can manage your UI elements.
For Example:
In you controller:
$scope.count = 0;
for(var i = 0; i < $scope.myData.length; i++){
if($scope.myData[i].string === ""){
$scope.count ++;
}
}
In you HTML:
<div ng-repeat="str in myData">{{str.id}}. {{str.string}}</div>
<br/>
<span ng-if="count >= 1" style="color:red;">One or more string is empty</span>
</div>
Hope it helps.
just initialize $scope.count=0 now you can perform your task.....
<div ng-app="Test">
<div ng-controller="TestController">
<div ng-repeat="str in myData">{{str.id}}. {{str.string}}
<span ng-if="str.length < 1" ng-int="count=+1">
</div>
<br/>
<span ng-if="count > 1" style="color:red;">One or more string is empty</span>
</div>
</div>
I'm having some trouble getting a checkbox to display the correct state (checked/unchecked) of my model. I have the following in my controller:
app.controller('PhotosCtrl', ['$scope', function($scope) {
$scope.form = {};
$scope.editPhotos = {
token: $scope.token,
idArray: $scope.idArray
};
}]);
My form looks like this:
<form accept-charset="UTF-8" name="editPhotosForm" ng-submit="submit(editPhotos);" multipart="true" novalidate>
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" ng-model="editPhotos.token" ng-init="editPhotos.token='<%= form_authenticity_token %>'">
<div class="results-label"><b>{{total_count}}</b> <span ng-if="total_count == 1">Photo</span><span ng-if="total_count != 1">Photos</span> Found</div>
<div>
<div class="col">
<a ng-repeat="r in results" class="card result-link">
<div class="content result">
<div class="caption">
<input type="checkbox" ng-model="idArray[r.id]">
</div>
<div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}">
</div>
</div>
</a>
</div>
</div>
</form>
On my repeater element, I call ng-init="idArray[r.id] = 'false'" to initialize a key r.id = 'false' for each item in r. I don't know if I need to do this or not. I've tried the code without it and it makes no difference. I've also tried using ng-value-true and ng-value-false but those don't seem to be working for me.
Most of the other posts I've seen on this issue deal with simple variables (e.g. $scope.someVar = true rather than more complex structures like a hash.
Here is the structure of idArray:
$scope.idArray = {1290: "false", 1291: "true", 1292: "true", 1293: "false", 1294: "false", 1414: "false"};
This is generated by the ng-init in my repeater, since the ids of the photos can't be known beforehand.
Here is what results looks like:
{
id: 1290,
company_id: null,
image_url: "http://s3.amazonaws.com/mybucket/photos/images/000/001/290/original/214.JPG?1432217895"
}
Doing the following
ng-init="idArray[r.id] = 'false'"
You're assigning the string value 'false' into your object.
Can't you deal with that inside your controller?
$scope.idArray = {};
for (var i = 0; i < $scope.results.length; ++i){
$scope.idArray[$scope.results[i].id] = (i%2 == 0);
}
And removing the ng-init="" (which is, according to Angular doc, a bad practice https://docs.angularjs.org/api/ng/directive/ngInit ).
Another thing was the anchor element that was wrapping the checkbox element. This lead to the click event that was not triggered on the checkbox, but only on the anchor.
<div class="col">
<div ng-repeat="r in results" class="card result-link">
<div class="content result">
<div class="caption">
<input type="checkbox" ng-model="idArray[r.id]">
</div>
<div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}">
</div>
</div>
</div>
</div>
fiddle :
http://jsfiddle.net/patxy/wak7pwwp/
var app = angular.module('App', []);
app.controller('Ctrl', function($scope, $http){
$scope.plusvalenza1='';
$scope.budget0=60;
$scope.plusvalenza= function(venduto,acquistato){return venduto - acquistato};
$http.get("rosa.php").success(function(data){
$scope.rose=data;
});
$http.get("giocatoriLiberi.php").success(function(data){
$scope.giocLiberi=data;
});
$scope.range = function(start, end) {
var result = [];
start = parseInt(start); //Make string input int
end = parseInt(end);
for (var i = start; i <= end; i++) {
result.push(i);
}
return result;
};
<div ng-controller="Ctrl">
<div class="row">
<div class="col-md-3">
<label>Vendere:</label>
<select ng-model="selectedItem1" ng-options="(rosa.nome+' '+rosa.costo) for rosa in rose"></select>
</div>
<div class="col-md-3">
<label>Acquistare:</label>
<select ng-model="giocAcq1" ng-options="(lib.nome+' '+lib.costo) for lib in giocLiberi | filter:{ruolo:selectedItem1.ruolo}"></select>
</div>
<div class="col-md-1">
<label>Offerta:</label>
<select ng-model="off0" style="width: 60px" ng-options="page for page in range(giocAcq1.costo, budget0--selectedItem1.costo)" ></select>
</div>
<div class="col-md-3">
<label></label>
<div ng-model="budget0">Il tuo budget e': {{budget0}} fantamilioni</div>
<p ng-model="plusvalenza1" ng-show="selectedItem1.costo > giocAcq1.costo">Questa offerta ti garantisce una plusvalenza di {{plusvalenza(selectedItem1.costo,giocAcq1.costo)}} fantamilioni per la prossima busta</p>
</div>
</div>
</div>
in the attached code i'd like to store the result of the plusvalenza(selectedItem1.costo,giocAcq1.costo) function in the ng-model="plusvalenza1" or in any way in a variable thath i can after use in a post service to send data at my db.
I tried like a select tag but i have not the same result...can anyone help me?
thanks in advance...
Why don't you save the result in the scope before returning it?
Like this:
$scope.plusvalenzaResult = 0;
$scope.budget0 = 60;
$scope.plusvalenza = function(venduto, acquistato) {
$scope.plusvalenzaResult = venduto - acquistato;
return $scope.plusvalenzaResult;
//or you can just reference this variable in html instead of returning it
};