I have a problem using AngularJS in my application. Particularly, when I have to call a function that I have Written in controller part, it doesn't work.
Anyone knows how I have to proceed. Thanks.
This is my code... the function that gives me some problems is called totale().
var app = angular.module('pizza', []);
app.controller('a1', function ($scope) {
$scope.listino = [
{id: 1, nom: 'Marinara', prezzo: 3.00},
{id: 2, nom: 'Margherita', prezzo: 4.50},
{id: 3, nom: '4 Formaggi', prezzo: 6.50},
{id: 4, nom: 'Carbonara', prezzo: 6.00},
{id: 5, nom: 'Boscaiola', prezzo: 7.00},
{id: 6, nom: 'Patatosa', prezzo: 5.50},
{id: 7, nom: 'Capricciosa', prezzo: 6.00},
];
$scope.paste = [
{n: 1, nome: 'Tradizionale'},
{n: 2, nome: 'Integrale'}
];
$scope.basi = [
{n: 1, nome: 'Pomodoro', prezzo: 1.50},
{n: 2, nome: 'Bianca', prezzo: 0}
];
$scope.ingredienti = [
{n: 1, nome: 'Verdure', prezzo: 1.50, select: false},
{n: 2, nome: 'Affettati', prezzo: 1.85, select: false},
{n: 3, nome: 'Funghi', prezzo: 2.90, select: false},
{n: 4, nome: 'Altri', prezzo: 2, select: false}
];
$scope.totale= function(){
var tot=0;
var sel = false;
if ($scope.listino.val) {
tot+=parseFloat($scope.listino.val);
}
if ($scope.basi.b) {
tot+=parseFloat($scope.basi.b);
}
angular.forEach($scope.ingredienti, function (ingrediente) {
if (ingrediente.selected) {
tot += ingrediente.prezzo;
sel = true;
}
});
$scope.isDisabled = ($scope.paste.p || $scope.listino.val || $scope.basi.b || sel) ? false : true;
return tot;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button ng-click="$scope.ordine()" type="button" class="bottone btn btn-danger" ng-disabled="$scope.isDisabled">
Totale da pagare {{$scope.totale()}}€</button>
Related
I want to make another array object from an array object, suppose I fetched a huge data from an api but I need only particular elements from that object. Exampl:-
const mainArray = [
{id: 1, name: 'John', age: 10},
{id: 2, name: 'Mark', age: 14},
{id: 3, name: 'Kevin', age: 15},
{id: 4, name: 'Julie', age: 16},
{id: 5, name: 'Liz', age: 10},
{id: 5, name: 'Emma', age: 11},
{id: 6, name: 'Robert', age: 13},
]
So suppose we have a huge list now I only want Kevin, Emma & Mark to display, for that I need an array of them like this:-
const specialKids = [
{id: 2, name: 'Mark', age: 14},
{id: 3, name: 'Kevin', age: 15},
{id: 5, name: 'Emma', age: 11},
]
How can I achieve that ?
To do this you can use the filter method of JS.
Documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?retiredLocale=de
in your case something like this should be enough:
let specialKids[];
specialKids = mainArray.filter(item => item.name === "Mark" || item.name === "Kevin" || item.name === "Emma")
ArrayList<String> yourintList = new ArrayList<>(Arrays.asList(yourArray));
for (int i = 0; i < yourintList.lenght; i++) {
if (yourintList.contains("Kevin")) {
do something
}
I am working on React project and I am using Redux and Hooks. I have problem and wasted 2 days.
I have this array which comes from state:
Array = [
{value: 0, id: 161435}
{value: 1, id: 161435}
{value: 2, id: 161435}
{value: 3, id: 161435}
{value: 4, id: 161435}
,
{value: 1, id: 161434}
{value: 2, id: 161434}
{value: 3, id: 161434}
{value: 4, id: 161434}
{value: 5, id: 161434}
]
I want the result like
[{value:10,id:161435},{value:14,id:161434}]
I have tried array.reduce and it's not work.
Can anyone help me in this ?
Don't use reduce, do this instead:
const arr = [
{value: 0, id: 161435},
{value: 1, id: 161435},
{value: 2, id: 161435},
{value: 3, id: 161435},
{value: 4, id: 161435},
{value: 1, id: 161434},
{value: 2, id: 161434},
{value: 3, id: 161434},
{value: 4, id: 161434},
{value: 5, id: 161434},
];
const valueSumById = {};
for (const { value, id } of arr) {
valueSumById[id] = (valueSumById[id] || 0) + value;
}
const result = Object
.entries(valueSumById)
.map(([id, value]) => ({ id, value }));
console.log(result);
const allObj = [
{value: 0, id: 161435},
{value: 1, id: 161435},
{value: 2, id: 161435},
{value: 3, id: 161435},
{value: 4, id: 161435},
{value: 1, id: 161434},
{value: 2, id: 161434},
{value: 3, id: 161434},
{value: 4, id: 161434},
{value: 5, id: 161434}
]
const total = []
allObj.map((obj) => {
const theIndex = total.findIndex(item => item.id === obj.id);
if( theIndex === -1){
total.push(obj)
} else {
total[theIndex].value += obj.value;
}
});
console.log(total) // [ { value: 10, id: 161435 }, { value: 15, id: 161434 }]
The problem is that I have a list of people and their city id. I want to get the city name based on their id from another list by a function.
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>City</th>
</tr>
<tr ng-repeat="item in samples">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td>{{getCity(item.city)}}</td>
</tr>
</table>
and the controller:
$scope.samples = [
{id: 1, name: "alex", type: "Average", city: 12},
{id: 2, name: "Alex", type: "Average", city: 12},
{id: 3, name: "Mia", type: "Medium", city: 13},
{id: 4, name: "Sasha", type: "Top", city: 14},
{id: 5, name: "Eric", type: "Top", city: 12},
{id: 6, name: "Taz", type: "Average", city: 14},
{id: 7, name: "Normai", type: "Low", city: 13},
{id: 8, name: "Jim", type: "Average", city: 11}];
$scope.city = [
{id: 11, name: "Dallas"},
{id: 12, name: "Los Angeles"},
{id: 13, name: "New York"},
{id: 14, name: "Washington"}
];
$scope.getCity = function(name) {
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
return $scope.city_name;
});
}
Here is a Fiddle for more details.
you are return value at wrong place. I just update the jsfiddle you can check here.
Here is the changes of the code.
$scope.getCity = function(name) {
$scope.city_name = "";
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
});
return $scope.city_name;
}
}]);
Try this function
$scope.getCity = function(id) {
var city = $scope.city.filter(function(c){ return angular.equals(c.id, id); })[0];
return city.name;
}
So I'm playing around with AngularJS and wants to make two separate lists of skills. On list for my development skills and one for my design skills.
Problem is that I my data from the development nested scope is being rendered, but data from the design nested scope is not. What might I be doing wrong?
Here is my js:
var zkwskApp = angular.module('zkwskApp', []);
zkwskApp.controller('SkillsController', function($scope){
$scope.skills =
{ development: [
{ name: 'CSS3', level: 5, priority: 2},
{ name: 'HTML5', level: 5, priority: 1},
{ name: 'AngularJS', level: 1, priority: 3}
]
},
{ design: [
{ name: 'Design Thinking', level: 4, priority: 3}
]
},
{ management: [
{ name: 'SCRUM', level: 4, priority: 3}
]
};
});
And here is my HTML/template:
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development">
{{ skill.name }}
</li>
</ul>
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.design">
{{ skill.name }}
</li>
</ul>
Try this
zkwskApp.controller('SkillsController', function($scope){
$scope.skills =
{ development: [
{ name: 'CSS3', level: 5, priority: 2},
{ name: 'HTML5', level: 5, priority: 1},
{ name: 'AngularJS', level: 1, priority: 3}
],
design: [
{ name: 'Design Thinking', level: 4, priority: 3}
],
management: [
{ name: 'SCRUM', level: 4, priority: 3}
]
};
});
Try this code.
var zkwskApp = angular.module('zkwskApp', []);
zkwskApp.controller('SkillsController', function($scope){
$scope.skills =
{ development: [
{ name: 'CSS3', level: 5, priority: 2},
{ name: 'HTML5', level: 5, priority: 1},
{ name: 'AngularJS', level: 1, priority: 3}
],
design: [
{ name: 'Design Thinking', level: 4, priority: 3}
],
management: [
{ name: 'SCRUM', level: 4, priority: 3}
]
};
});
In my angular-kendo application I'm unable to get the Grid filter to show at all - not even a filter icon, just plain column headers.
Here is my html:
<div ng-controller="IntroductionWizardCtrl">
<h3 class="text-muted">Step 2: Select Application To Describe</h3>
<div kendo-grid id="grid"
k-data-source="dataSource"
k-sortable="true"
k-on-change="selectedItem = data"
k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": 5 }'
k-filterable="true">
</div>
<div>
<p>{{selectedItem}}</p>
</div>
<br/>
<input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
data-ng-click="" />
</div>
here is the corresponding Angular controller:
'use strict';
angular.module('wizardApp').controller('IntroductionWizardCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$scope.dataSource = {
data: [{id: 1, name: "Account Underwriting - Misc App", bu: 50},
{id: 2, name: "Achieve - Distributed", bu: 43},
{id: 3, name: "ACT!", bu: 27},
{id: 4, name: "Actuarial Database", bu: 29},
{id: 5, name: "Adjustment Invoicing System (AIS)", bu: 34},
{id: 6, name: "buncy Download", bu: 43},
{id: 7, name: "Ariba", bu: 27},
{id: 8, name: "Athena NY", bu: 29},
{id: 9, name: "Authoria", bu: 34},
{id: 10, name: "Avenue", bu: 43},
{id: 11, name: "BC&IT - Services", bu: 27},
{id: 12, name: "Billing Website", bu: 29},
{id: 13, name: "Blue Butler", bu: 34},
{id: 14, name: "BOE External", bu: 43},
{id: 15, name: "Builders Risk", bu: 27},
{id: 16, name: "Business Intelligence", bu: 29},
{id: 17, name: "Care Center", bu: 34}],
pageSize: 5, serverFiltering: true
};
$scope.rowSelected = function(e) {
var grid = e.sender;
var selectedRows = grid.select();
for (var i = 0; i < selectedRows.length; i++) {
$scope.selectedItem = grid.dataItem(selectedRows[i]);
break;
}
};
$scope.categoryDataSelectedRows=[];
$scope.categoryData=
{
data:
[{name: "General Application Information"},
{name: "User Interface configuration description"},
{name: "Application Architecture"},
{name: "Database"},
{ name: "Backup & DR"},
{name: "Design"},
{ name: "Operational data"},
{ name: "Testing"},
{name: "Application Configuration details"},
{ name: "Application connectivity requirements"},
{name: "Deployment Requirements"},
{name: "Application dependencies"},
{name: "Infrastructure dependencies"},
{ name: "Business value assessment"},
{ name: "Data requirements"},
{name: "Hosting OS requirements"},
{ name: "License requirements"}], pageSize: 5
}
$scope.rowSelectedCategory = function(e) {
var gridCategory = e.sender;
var selectedRowsCategory = gridCategory.select();
for (var i = 0; i < selectedRowsCategory.length; i++) {
$scope.selectedItemCategory = gridCategory.dataItem(selectedRowsCategory[i]);
break;
}
};
}
]);
I have looked over many examples, outside of Angular, where Kendo Grid has filtering working just fine. Yet, with angular-kendo I'm having this problem.
Well, as it turns out, my issue was with the order in which various css files were being loaded.
bootstrap was overwriting some other styles. Took me a while to sort this out, but now my angular-kendo grid is OK. Thanks for helping me!