I want to push each object into an array when it is clicked. I am able to get a reference of each individual object but I'm not able to push the object into an array. It tells me push is not a function. I've spent so much time trying to figure this out. Can someone point me in the right direction?
angular.module('app', []);
angular.module('app').controller("MainController", function() {
var vm = this;
vm.ordered = {};
vm.menu = [{
title: 'Pizza',
type: 'entree',
favorite: true,
price: 10
}, {
title: 'Tacos',
type: 'entree',
favorite: false,
price: 5
}, {
title: 'Onion Rings',
type: 'app',
favorite: false,
price: 2
}, {
title: 'Ice Cream',
type: 'dessert',
favorite: false,
price: 11
}, {
title: 'Mac n Cheese',
type: 'app',
favorite: false,
price: 7
}, {
title: 'Salad',
type: 'salad',
favorite: true,
price: 4
}];
}).directive('section', function() {
return {
restrict: 'E',
link: function(scope, element) {
scope.ordered = {};
element.bind('click', function(event) {
console.log(scope.item);
scope.ordered.push(scope.item);
});
}
};
});;
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
<div class="left">
<h2>Lists One</h2>
<section id="{{item.id}}" ng-repeat="item in main.menu | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">
<strong>{{item.title}} </strong>
<span>$ {{item.price}}</span>
</section>
</div>
<div class="right">
<h2>Lists Two</h2>
<section id="{{item.id}}" ng-repeat="item in main.ordered | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">
<strong>{{item.title}} </strong>
<span>$ {{item.price}}</span>
</section>
</div>
Change scope.ordered = {}; to scope.ordered = [];
Related
I am tying to use malhar-angular-dashboard to add widget to my application.
https://github.com/dtpublic/malhar-angular-dashboard
I am just experimenting tying to add a widget to a tab in my web application.
Here is the View:
<html>
<head>
<script src = "/portal_demo/lib/1_6_10/angular.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-animate.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-aria.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-messages.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-cookies.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-route.js"></script>
<script src = "/portal_demo/lib/1_1_9/angular-material.js"></script>
<script src = "/portal_demo/lib/2_5_0/ui-bootstrap-tpls-2.5.0.js"></script>
<script src = "mainController.js"></script>
<link rel = "stylesheet" href = "/portal_demo/lib/3_3_7/bootstrap.css">
<link rel = "stylesheet" href = "/portal_demo/lib/1_1_9/angular-material.css">
<link rel="stylesheet" href="/portal_demo/lib/dash/malhar-angular-dashboard.css">
<script src="/portal_demo/lib/dash/malhar-angular-dashboard.js"></script>
<script src="/portal_demo/lib/dash/sortable.js"></script>
</head>
<body ng-app = "classApp" ng-controller="mainController" >
<header style="position: relative;">
<h2 style="display: inline-block;">Portal</h2>
</header>
<md-content>
<!--- home page for default user --->
<md-tabs md-dynamic-height="" md-stretch-tabs="never" md-border-bottom="" style="background: #f5f5f5;">
<md-tab label="MY VIEW" >
<md-content>
<div dashboard="dashboardOptions"></div>
</md-content>
</md-tab>
<md-tab label="PROJECT 1">
<md-content class="md-padding">
</md-content>
</md-tab>
</md-tabs>
</md-content>
</body>
</html>
Here is the Controller:
var app = angular.module("classApp", ['ngMaterial','ngAnimate', 'ui.bootstrap','ngRoute', 'ui.dashboard']);
//Main Controller
app.controller("mainController", mainController);
function mainController($scope, $http, $window, $window, $location, widgetDefinitions, defaultWidgets) {
//run initMain function during initialization
initMain();
function initMain() {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'explicitSave',
explicitSave: true
};
}
};
However, currently I am getting this error:
Error: [$injector:unpr] Unknown provider: widgetDefinitionsProvider <- widgetDefinitions <- mainController
I am just tying to define a default widget, add it to dashboardOptions and then display it in my view using . The widgetDefinitions should already be defined in malhar-angular-dashboard.js. Am I missing a library or is there something else I am doing wrong.
You are not missing any library, it's just that you have to have a factory which returns your widget definitions, for example.
.factory('widgetDefinitions', function (RandomDataModel, MyChartDataModel) {
return [
{
name: 'random',
directive: 'wt-scope-watch',
attrs: {
value: 'randomValue'
}
},
{
name: 'time',
directive: 'wt-time'
},
{
name: 'datamodel',
directive: 'wt-scope-watch',
dataAttrName: 'value',
dataModelType: RandomDataModel
},
{
name: 'resizable',
templateUrl: 'template/resizable.html',
attrs: {
class: 'demo-widget-resizable'
}
},
{
name: 'fluid',
directive: 'wt-fluid',
size: {
width: '50%',
height: '250px'
}
},
{
name: 'My Chart',
directive: 'wt-my-chart',
attrs: {
config: 'config',
toolbar: {
icons: [
'glyphicon glyphicon-tags',
'glyphicon glyphicon-film'
]
}
},
size: {
width: '50%',
height: '250px'
}
}
];
})
.value('defaultWidgets', [
{name: 'random'},
{name: 'time'},
{name: 'datamodel'},
{
name: 'random',
style: {
width: '50%'
}
},
{
name: 'time',
style: {
width: '50%'
}
},
{name: 'My Chart'}
])
.controller('DemoCtrl', function ($scope, $interval, $window, widgetDefinitions, defaultWidgets) {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'demo_simple'
};
$scope.randomValue = Math.random();
$scope.config = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Demo'
},
loading: false
};
$interval(function () {
$scope.randomValue = Math.random();
}, 5000);
$scope.doCallback = function () {
console.log('execute callback...');
}
});
I am developing an Angularjs application.
I am using ocLazyLoad and ui.router.
I have a controller and two views with graphs using chart.js and angular-nvd3.
The graphics appear but keeps giving this mistake:
Error: ng:areq Bad Argument
and
angular.js:13550 Error: [ng:areq] http://errors.angularjs.org/1.5.5/ng/areq?p0=ChartCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
MY app.js::
.state('dashboard.chart',{
templateUrl:'views/chart.html',
url:'/chart',
controller:'ChartCtrl',
resolve: {
loadMyFile:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'chart.js',
files:[
'bower_components/angular-chart.js/dist/angular-chart.min.js',
'bower_components/angular-chart.js/dist/angular-chart.css'
]
}),
$ocLazyLoad.load({
name:'sbAdminApp',
files:['scripts/controllers/chartContoller.js']
})
}
}
})
.state('dashboard.graficohora',{
templateUrl:'views/graficohora.html',
url:'/graficohora',
controller:'GraficohoraCtrl',
resolve: {
loadMyFile:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'nvd3',
files:[
'bower_components/d3/d3.js',
'bower_components/nvd3/build/nv.d3.js',
'bower_components/angular-nvd3/dist/angular-nvd3.js',
]
}),
$ocLazyLoad.load({
name:'sbAdminApp',
files:['scripts/controllers/graficohoraController.js']
})
}
}
MY CONTROLLER::
angular.module('sbAdminApp')
.controller('GraficohoraCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
getData()
function getData(){
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
}
}]);
MY HTML::
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Charts</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<div class="row">
<div class="col-lg-12 col-sm-12" id="polar area-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Informações sobre Dados Analisados</div>
<div class="panel-body">
<div ng-controller="ChartCtrl">
<nvd3 options='options' data='data'></nvd3>
</div>
</div>
</div>
</div>
</div>
Can you please help me with this error?
thanks..
The ng-controller on the html file was on the wrong place causing this error.
You never define the 'ChartCtrl' in your app module.
Add this to your app module.
.controller('ChartCtrl',['$scope', function ($scope) {
// add functionality to your controller
}]);
In my controller I have this code:
$scope.lists = [{
listName: 'list1'
}, {
listName: 'list2'
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}];
});
The Input from lists cames from a webservice, so the values (list1 and list2) can be different each time i reload the app. I can also more then 2 items in lists.
How can I show the value from $scope[listName] in an ng-repat section in my view?
Thanks for your Help.
Stefan.
You might try something like this:
(function() {
angular.module("myApp", []).controller("controller", ["$scope",
function($scope) {
$scope.lists = [{
listName: "list1"
}, {
listName: "list2"
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}];
$scope.results = $scope[listName];
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in results">{{item.Name}}</li>
</ul>
</div>
</div>
I'm using Angular Google Chart but i do not know how to add a select event.
In the API Doc can be seen the method 'registerWrapperListener', but i dont used it
Some idea to add select-event in this example?
Thanks you
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function($scope) {
var chart1 = {};
chart1.type = "OrgChart";
chart1.cssStyle = "height:200px; width:300px;";
chart1.data = {
cols: [{
id: 'Name',
label: 'Name',
type: 'string'
}, {
id: 'Manager',
label: 'Manager',
type: 'string'
}, {
id: 'ToolTip',
label: 'ToolTip',
type: 'string'
}],
rows: [{
c: [{
v: '0',
f: 'CEO'
}, {
v: ''
}, {
v: 'The CEO'
}]
}, {
c: [{
v: '1',
f: 'worker 1'
}, {
v: '0'
}, {
v: ''
}]
}]
};
$scope.chart = chart1;
});
<html xmlns="http://www.w3.org/1999/html">
<body ng-app="google-chart-example" ng-controller="MainCtrl">
<div>
<div google-chart chart="chart" style="{{chart.cssStyle}}" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html>
In your html code, it would be:
<div google-chart chart="chart" style="{{chart.cssStyle}}" on-select="selectCallbackMethodYouWant(selectedItem)" />
I want to populate data into kendo grid but I am getting an error unknown provider:Error: [$injector:unpr] Unknown provider: promiseObjProvider <- promiseObj <- ProcessController <- ProcessController. I am not sure where i am making mistake.Please see below code and advise how can i reslove this problem.
createEditProcess.html
<div class="panel panel-primary">
<div class="panel-heading">
<label ng-hide="editMode">Create New Process </label>
<label ng-show="editMode">Edit Process </label>
</div>
<div class="tabContent">
<form name="createProcessFormName" id="createProcessForm"
name="form" role="form" class="form-horizontal"
kendo-validator="validator" k-validate-on-blur="false" k-options="myValidatorOptions" ng-submit="validate($event)">
<div kendo-window="ERHPopup" k-title=""
k-width="350" k-height="100" k-visible="false" >
<div><span>This Process Has Risks And Controls Aligned To It. Please Review And Adjust Those If Necessary</span></div>
</div>
<div kendo-window="geographicLocationsPopup" k-title=""
k-width="350" k-height="100" k-visible="false" >
<div><span>This Process Has Risks And Controls Aligned To It. Please Review the Risks and Controls</span></div>
</div>
<div kendo-window="legalEntitiesPopup" k-title=""
k-width="350" k-height="100" k-visible="false" >
<div><span>This Process Has Risks And Controls Aligned To It. Please Review the Risks and Controls</span></div>
</div>
<div kendo-window="EPCFPopup" k-title=""
k-width="350" k-height="100" k-visible="false" >
<div><span>This Process Has Risks And Controls Aligned To It. Please Review The Risks And Controls</span></div>
</div>
<ng-include src="'views/createEditProcessContent.html'"></ng-include>
</form>
</div>
</div>
<div kendo-window="confirmationWin" options="confirmationWinOptions" class="confirmationWin"></div>
</script>
processController.JS
angular.module('riskAssessmentApp').controller('ProcessController', function($scope, Process,TreeViewData, $rootScope,
$routeParams, ViewEditPrcsService, kendoCustomDataSource, $http,EPCFHirachyInfo,ERhHirachyInfo,
$location,alert,ProcessUpdate, ihtRskRatingGridConfig, processTreeConfig, alignedRisksHeaderPallette, alignedRisksModal,
riskToControlGridDataService,controlToProcessConfig,savaControlToProcessGrid, riskRatingGrid,savaControlToProcessNoAlignGrid, processRatingGridConfig, Rating, alignExstRskDataService, alignedCtrlsHeaderPallette, alignExstRiskGrid,ConfirmationConfig,promiseObj) {
'use strict';
var resetDataPrt = function() {
return new kendo.data.DataSource({
data: $scope.processRating,
navigatable: true,
pageSize: 100
});
};
if($scope.editMode){
$scope.ihtRskRatingGridOptions = ihtRskRatingGridConfig.ihtRskRatingGrid;
ihtRskRatingGridConfig.ihtRskRatingGrid.dataSource = resetData2();
$scope.processRating = promiseObj.data;
$scope.processRatingGridOptions = processRatingGridConfig.processRatingGrid;
processRatingGridConfig.processRatingGrid.dataSource = resetDataPrt();
});
APP.JS
.when('/process/create', {
templateUrl : 'views/createEditProcess.html',
controller : 'ProcessController',
resolve: {
promiseObj: function(Rating){
return Rating.getAllProcessRatings();
}
}
})
processGrid.js
angular.module('riskAssessmentApp').value('processRatingGridConfig', {
processRatingGrid: {
columns: [{
field: 'ratingDateHistory',
title: 'History',
width: '8em'
}, {
field: 'irrComputed',
title: 'Process Inherent Risk Rating Computed',
width: '10em'
}, {
field: 'irrFinalOutcome',
title: 'Process Inherent risk business Final',
width: '10em'
}, {
field: 'mssControlFlag',
title: 'Missing controls',
width: '10em'
}, {
field: 'computedEffectiveRating',
title: 'Overall Control Effectiveness Computed',
width: '10em'
}, {
field: 'businessEffectiveRating',
title: 'Overall Control Effectiveness Business',
width: '10em'
}, {
field: 'effectiveJustification',
title: 'Control Effectiveness Business Justification',
width: '10em'
}, {
field: 'residualRiskComputed',
title: 'Residual Risk Computed',
width: '10em'
}, {
field: 'businessResidualRisk',
title: 'Residual Risk Business',
width: '10em'
}, {
field: 'residualRiskJustification',
title: 'Residual Risk Business Justification',
width: '10em'
}, {
field: 'riskDescription',
title: 'Risk Description',
width: '10em'
}, {
field: 'riskAcceptanceFlag',
title: 'Risk Acceptance',
width: '10em'
}, {
field: 'riskAcceptanceRationale',
title: 'Risk Acceptance Rationale',
width: '10em'
}]
},
});
Factory.js
angular.module("riskAssessmentApp").factory('Rating', function($http, $location) {
getAllUpdateQuestions: function (prcsSessionKey) {
return $http.get('app/processrating/rest/getProcessRating/' +prcsSessionKey);
},
getAllProcessRatings: function (processKey) {
return $http.get('app/processrating/rest/getProcessRatings/' + processKey);
}
};
});
In the line: <div class="panel panel-primary" ng-controller> remove ng-controller