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.
I have list of checkbox with button submit , and I when i click on submit, I have to get all checked values in other view table. I find a lot of answers, but they all propose to get values in the same view,but I need to get values in other view(ajoutFactAdmin2), how can I do that please. this is the code:
ajoutFactAdmin2.html
<div class="row" ng-repeat="x in namesF3">
<div class="col"><input type="checkbox" name="" ng-modal="x.selected" ng-checked="exist(x)" ng-click="toggleSelection(x)" ng-true-value="'{{x.CodeEnvoiColis}}'" ng-false-value="''" id="'{{x.CodeEnvoiColis}}'"></div>
<div class="col" >{{x.CodeEnvoiColis}}</div>
<div class="col" width="20%">{{x.StatutColis}} </div>
<div class="col" width="20%">{{x.VilleDestColis}}</div>
</div>
<div class="selectedcontent">
<h3> Selected Names </h3>
<p ng-repeat = "selectedName in selected"> {{selectedName.CodeEnvoiColis}} </p>
</div>
<a class="button button-info" ng-click="toggleSelection(x)" href="#/ajoutFactAdmin2" style="background-color:#1627C0;float: right;">Ajouter</a>
app.js :
$scope.selected = [];
$scope.namesF3 = [];
$scope.exist = function(item){
return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item){
var x = [];
var idx = $scope.selected.indexOf(item);
if(idx > -1){
$scope.selected.splice(idx, 1);
}
else{
$scope.selected.push(item);
}
}
There are mainly 3 ways to achieve this
local storage/session storage:
To set value in local storage:
localStorage.setItem("key","value");
To get value:
localStorage.getItem("key");
Factory/Service
angular.module('app').factory('tempStorageService',function(){
var data={};
return{
setData:function(tempData){
data=tempData;
},
getData:function(){
return data;
}
}
})
$rootScope
$rootScope.tempData = YourData;
I would prefer to go with localstorage option because if you refresh the browser the data that is stored using factory or with $rootscope vanishes.
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];
}
<div ng-init="value = (total_rec - ans_rate)">
<h4 ng-if="value<0">0</h4>
<h4 ng-if="value>=0">{{total_rec - ans_rate}}</h4>
</div>
I want to print 0 if result of total_rec - ans_rate comes 0 or less than 0, here total_rec & ans_rate is variables defined in angular file. please suggest me answers.
i want to implement this logic here
ex.
var x= total_rec-ans_rate ;
if (x <=0){
print 0;
}else{
print x;
}
but in this way :-
<div ng-init="value = (total_rec - ans_rate)">
<h4 ng-if="value<0">0</h4>
<h4 ng-if="value>=0">{{total_rec - ans_rate}}</h4>
</div>
please suggest me the proper way to do this.. Thanks..
Hope this make clear to you.
<body ng-controller="MainCtrl">
<div ng-init="value = cal_result()">
<h4 ng-if="value < 0">0</h4>
<h4 ng-if="value > 0">{{value}}</h4>
</div>
<script>
var app = angular.module('demoApp', []);
app.controller('MainCtrl', function($scope) {
$scope.total_rec =0;
$scope.ans_rate = 3;
$scope.cal_result = function () {
return $scope.total_rec - $scope.ans_rate;
}
});
</script>
I am newbie to angular. I have two scope variables i.e,$scope.jsonData and $scope.dbdatas. I want to show value from $scope.jsonData corresponding to $scope.dbdatas.name. Please check my code. I have mentioned my desire output in the code.
View:
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
<div>
{{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>
<!--something like {{dbdata.name}} : <span show-value class="list_text">{{dbdata.value}}</span>-->
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});
/*app.directive('showValue',function(){
return{
restrict:'A',
link:function(scope,ele,attr){
}
}
});*/
Current Output
MoliRet : L
MoliRet : R
Eleget : M
Desire Output
MoliRet: Let
MoliRet: Ret
Eleget: More than once
Working Fiddle
HTML:
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="item in jsonData">
<div ng-repeat='option in item.options'>
<div ng-show="isInArray(option.key)">
{{item.name}}: {{option.value}}
</div>
</div>
</div>
</div>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.isInArray = function(key){
var returnValue = false;
for(var i=0;i<$scope.dbdatas.length;i++){
if($scope.dbdatas[i].value==key){
returnValue = true;
break;
}
}
return returnValue
}
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});
Output:
Eleget: More than once
MoliRet: Let
MoliRet: Ret
Hope that solve your problem.
You can use angular.ForEach to match data from both scope variables and push the data to an array $scope. Please take a look at the solution below.
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
<div>
{{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>
</div>
</div>
<div ng-repeat="expect1 in expectations">{{expect1.name}}: {{expect1.value}}</div>
</div>
</div>
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
$scope.expectations= [];
angular.forEach($scope.dbdatas,function(value1){
angular.forEach($scope.jsonData,function(value2){
if(value1.name == value2.name){
angular.forEach(value2.options,function(value3){
if(value3.key == value1.value){
$scope.expectations.push({
"name" : value2.name,
"value": value3.value});
}
});
}
});
});
Expected output will be
MoliRet: Let
MoliRet: Ret
Eleget: More than once
I would suggest you have to store a unique options table in one json and use angular custom service filter to handle the relative key 'look at the plunker'. you can use this custom filter in any controller and view.
Here is custom filter
app.filter('myFilter', ['$filter', function ($filter) {
return function (data, param) {
var output = $filter('filter')(data, {key:param},true);
return (param && output.length) ? output[0].value : '';
};
}]);
Here is a working plunker
.Hope that help.