at first, I want to say that I am new at programing and also at AngularJS so please be a little forgiving.
My Problem is a little complex but i try to explain it as good as i can. At first i want to tell you what im actully doing.
I have to expand the local "Intrant" from my company and now i try to integrate an overview about the forms which are used by the employeers.
I have differnt groups and childgroups which are already implemented and shown on the first template. My problem is that i can not access to the data after i opend a new template which is made to show the forms which are a part of the childgroups.
Here you can see my first template, this shows all upper groups:
<div class="panel">
<div class="panel-body">
<h1 class="h3 nomargin">Formulare</h1>
</div>
</div>
<div class="row">
<ng-repeat ng-repeat="objFormGroup in arrFormGroups">
<div class="col-xs-12 col-lg-6">
<name-form-group data-group="objFormGroup"></name-form-group>
</div>
</ng-repeat>
</div>
The "objFromGroup" is filled in the "module.js" and the data is comming out of a REST-Service which is hosted local on my computer.
Also there is an dropdown menü which is opened throgh the "< name-from-group >"and this refers to another template:
<nav role="navigation">
<ul>
<li class="menu-item-has-children">
<button id="bdd" class="dropbtn" dropdown-toggle ng-disabled="disabled"><font color="#fff">{{group.name}}<span class="caret"></span></font></button>
<ul class="sub-menu">
<li ng-repeat="childGroup in group.ChildGroups">
{{childGroup.name}}
</li>
</ul>
<br> <br>
</li>
</ul>
</nav>
This is working. But now i want to open the third template (over_view_froms) to show the forms which are part of the childgroup the user clicked on. But when i try to display the forms by using the data which is comming out of the REST-Service it is not working. I also can not access to the data i used befor like {{childGroups.name}} on this template.
Here you can see the last template where the forms should be display:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>{{childGroup.name}}</caption>
<tr>
<th>Formular</th>
<th>Format</th>
<th>Größe</th>
<th>Stand</th>
</tr>
<tr>
<td>{{group.childGroup.Formulare.name}}</td>
<td>TEST</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</body>
</html>
module.js:
strehlowIntranet
.config(['$stateProvider', 'strehlowConfigProvider', function ($stateProvider, strehlowConfigProvider) {
$stateProvider
.state('app.formgroups', {
url: '/formgroups',
label: 'Formulare',
template_icon: 'fa fa-file-pdf-o',
resolve: {
objFormGroups: ['FormsService', function (FormsService) {
return FormsService.getFormGroups();
}]
},
views: {
'content#app': {
templateUrl: 'app/templates/wforms/over_view.html',
controller: ['$scope', 'objFormGroups', function ($scope, objFormGroups) {
$scope.arrFormGroups = objFormGroups;
}]
}
}
});
$stateProvider
.state('app.groupdetail',{
url: '/groupdetail',
resolve: {
objSingleGroup: ['$stateParams', function ($stateParams) {
return $stateParams.group;
}]
},
views: {
'content#app': {
templateUrl: 'app/templates/wforms/over_view_forms.html',
controller: ['$scope', 'objSingleGroup', function ($scope, objSingleGroup) {
$scope.objGroup = objSingleGroup;
}]
}
}
});
}]);
So my question is how can i display the data on this template.
Thanks to everyone who trys to help me. (:
Related
Context: I have a left-menu (navigator) and right-panel (content) divs. Every item from the navigator is linked to the ID of its section in the right-panel.
Problem: I'm trying to scroll the right panel to the corresponding section when clicking on the menu item from the navigation panel.
I am doing it with anchorScroll() and locator.hash() functions. It works, but it scrolls the whole page (navigation and content).
I have created two controllers: One for the parent (including the navigator) and other for the container (the one I want to scroll). When I click in the item from the menu, I am changing a variable within the scope.
Then, from the child scope, I am watching that variable, performing the scroll with
html:
html:
<!-- Navigation Panel -->
<div id="helpNavigatorPanel">
<ul>
<li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)">
<a style="helpNavigationItems" href="#">{{item.title}}</a>
</li>
</ul>
</div>
<div id="helpContentPanel"ng-controller="contentHelpController" >
<div id="scrollablePanel">
<!-- List of help elements -->
<ul>
<li ng-repeat="some in list">
<div id="{{some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;">
...
</div>
</div>
</li>
</ul>
</div>
</div>
js:
Scope parent:
$scope.setCurrentItem = function (currentItemID){
$scope.currentItemID = currentItemID;
}
Scope child:
$scope.$watch('currentItemID', function (divDestinyID) {
$location.hash(divDestinyID);
$anchorScroll();
});
The problem is that the whole page is scrolled.
Any idea ?
Thank you!
A possible solution is to make your "child" into a directive. That way, you can scroll on the element, rather than the entire page
content-help.directive.js
angular
.module('appModule')
.directive('contentHelp', contentHelp);
function contentHelp() {
var directive = {
bindToController: true,
controller: ContentHelpController,
controllerAs: 'vm',
restrict: 'EA',
scope: {
list: '=',
currentItemId: '='
},
templateUrl: 'contentPanel.html'
};
return directive;
}
ContentHelpController.$inject = ['$scope', '$element'];
/* #ngInject */
function ContentHelpController ($scope, $element) {
var vm = this;
$scope.$watch(function() {
return vm.currentItemId;
}, onIdChange);
////
function onIdChange(newId) {
if(newId) {
var idElement = $element.find('#' + newId);
$element.animate({
scrollTop: idElement.offset().top
});
}
}
}
contentPanel.html
<div id="scrollablePanel">
<!-- List of help elements -->
<ul>
<li ng-repeat="some in vm.list">
<div id="{{::some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;">
...
</div>
</li>
</ul>
</div>
html
<!-- Navigation Panel -->
<div id="helpNavigatorPanel">
<ul>
<li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)">
<a style="helpNavigationItems" href="#">{{item.title}}</a>
</li>
</ul>
</div>
<div id="helpContentPanel" ng-controller="contentHelpController">
<content-help list="list" current-item-id="currentItemId"></content-help>
</div>
I have a very simple two page app and when navigating from listing page to details page, there is a very distinct flicker caused due to hide/show of the UI components. Attached is a screenshot where you can see both UIs visible at the time of transition (at the top is the details UI and at the bottom is the list UI)!
I am using ui-router for navigation.
function routingConfig($stateProvider, $urlRouterProvider, $locationProvider, applicationPathProvider) {
$stateProvider
.state('activities', {
url: applicationPathProvider.getBase(),
views: {
'': {
templateUrl: '/js/activity/activityList.partial.html',
controller: 'ActivityListController',
controllerAs: 'activityListController',
resolve: {
activitiesResponse: function(activityListService) {
return activityListService.listActivities();
}
},
ncyBreadcrumb: {
parent: '',
label: 'Activity List'
}
}
}
})
.state('activityDetails', {
url : applicationPathProvider.getPath('activityDetails'),
templateUrl : '/js/activity/activityDetails/activityDetails.partial.html',
controller : 'ActivityDetailsController',
controllerAs: 'activityDetailsController',
resolve: {
activityDetailsResponse: function($state, $stateParams, activityListService) {
return activityListService.getTasksForActivity($stateParams.activityId);
}
},
ncyBreadcrumb: {
parent: 'activities',
label : '{{activityDetailsController.selectedActivityText}}'
}
})
;
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise(applicationPathProvider.getBase());
}
Here is the service code which sends a REST call and creates a data structure which controller uses.
function getTasksForActivity(activityId) {
var deferred = $q.defer();
Restangular.one("activities", activityId).customGET("tasks")
.then(function (restangularTasks) {
deferred.resolve(buildValidTasksResponse(restangularTasks.plain()));
}, buildErrorTasksResponse);
return deferred.promise;
}
Here is the code for page 1 (the list page)
<div class="sl-artefact-plans" layout="row" flex>
<div class="sl-artefact-list-container" layout="column" style="width: 100%">
<div class='list_table'>
<div class='list_row' ng-repeat="activity in activityListController.activities | orderBy:sortType:sortReverse">
<div class='list_cell overflow td'>
<a ui-sref="activityDetails({activityId: activity.id})"
ng-click="activityListController.setSelectedActivityInService(activity)">
{{activity.summary}}
</a>
</div>
<div class='list_cell td' ng-bind="activity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'">
</div>
<div class='list_cell td' ng-bind="activity.status">
</div>
</div>
</div>
</div>
</div>
And this is page 2:
<div class="sl_artifact_details_header_bar">
<div class="sl_artifact_details_heading">
{{activityDetailsController.selectedActivityText}}
</div>
<div class="sl_artifact_details_info">
<span ng-class="activityDetailsController.selectedActivityStatus"
style="vertical-align:middle; margin:0px 0px 0px -3px">
{{activityDetailsController.selectedActivity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'}}</span>
<span style="padding-left: 10px">{{activityDetailsController.selectedActivity.status}}</span>
</div>
</div>
<table>
<tr ng-repeat="task in activityDetailsController.tasks">
<td ng-bind="task.summary"></td>
<td ng-bind="task.status"></td>
<td ng-bind="task.dueBy"></td>
</tr>
</table>
This is a very simple use-case and I am quite confused as to why is this occurring and how to resolve this.
Any pointers will help. Thanks.
I have an AngularJS Application which uses ngRoute to handle the routing of the app. The routing itself is working (the URL is being redirected to the correct page and the correct partial is open) however, I cannot retrieve the item which I need in the second page.
The first page lets you search for a list of documents (dummy at the moment but will eventually link to an API). The list items are clickable and will route you to the second page where the details of the document are listed.
I will outline the way I am attempting to achieve this at the moment but I am open to suggestions if anyone has ideas about how this solution can be improved.
app.js
angular.module("app", ["ngRoute", "ngAnimate"])
.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "Views/main.html",
controller: "MainController"
})
.when("/document/:id", {
templateUrl: "Views/document.html",
controller: "DocumentController"
})
.otherwise({redirectTo: "/main"});
});
main.html
<link rel="stylesheet" href="Stylesheets/main.css" type="text/css">
<div id="docSearchPanel" class="col-xs-12">
<ng-include src="'Views/Partials/documentSearchForm.html'"></ng-include>
</div>
<div id="formSearchResultsArea">
<div id="documentsFoundHeader">Documents Found</div>
<div id="documentsTableContainer">
<table id="documentsTable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="doc in documents" ng-click="showDocument()">
<td>{{doc.documentID}}</td>
<td>{{doc.documentTitle}}</td>
<td>{{doc.documentStatus}}</td>
</tr>
</tbody>
</table>
</div>
</div>
main.ctrl.js
angular.module("app").controller("MainController", function($scope, $location){
//This is populated by a function I have removed to keep the code simple
$scope.documents = []
$scope.showDocument = function(){
$scope.activeDocument = this.doc;
$location.path("document/"+this.doc.documentID);
};
});
document.html
<form ng-submit="downloadForm()" class="col-xs-12 col-md-6">
<h2>Document Details</h2>
<div class="row">
<h3>{{activeDocument.documentTitle}}</h3>
</div>
<div class="row" ng-repeat="field in selected.fields">
<div class="form-group">
<div class="document-attribute-header col-xs-5">{{field.key}}</div>
<div class="document-attribute-value col-xs-7">{{field.val}}</div>
</div>
</div>
</form>
document.ctrl.js
angular.module("app").controller("DocumentController", function($scope, $location, $routeParams){
$scope.activeDocument = getActiveDocument($routeParams.id);
function getActiveDocument(id){
for (var d in $scope.documents){
var doc = $scope.documents[d];
if (doc.documentID == id)
return doc;
}
}
});
The $scope-objects in the two controllers are not the same. You either make "documents" a member of the $rootScope (which you would need to inject in both controllers) or you make a documents-service which you inject.
Hope, that helped.
I'm building my first angularjs app, for my routing i use ui-router wich works great!
I want to achieve the following: in my app the user can search for a name/place etc. in a input field i got this working just fine. When the user finds what he is looking for they need to be able to click on the information and go to the page it belongs to.
So for example i search for "MacDonalds" i get to see the following "logo, name, adres, place, website" when i click this i will go to a page in my app with more information about MacDonalds.
I tried to do this as shown below.
app.js
'use strict';
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'view/home.html'
})
.state('restaurants', {
url: '/restaurants',
templateUrl: 'view/restaurants.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'view/contact.html'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
}]);
function RestaurantCtrl($scope) {
$scope.restaurantlist = [
{
name: 'A1-plaza',
adres: 'Ruimtevaart 8',
place: '3824 MX Amersfoort',
tel: '033 468 1988',
website: 'www.a1-plaza.nl',
logo: 'img/a1-plaza.png',
id: 'a1plaza'
},
{
name: 'De Faam',
adres: 'Hamseweg 5',
place: '3828 AA Hoogland',
tel: '033 480 1213',
website: 'www.defaam.nl',
logo: 'img/defaam.png',
id: 'defaam'
}
];
};
app.controller('RestaurantCtrl', RestaurantCtrl);
home.html
<section class="row">
<article class="col-xs-12" ng-controller="RestaurantCtrl">
<p>je kan momenteel zoeken op a1-plaza en de faam zowel naam als plaats en adres gegevens (dit blijft hier niet staan nienke ;)</p>
<form role="form">
<div class="form-group has-feedback">
<input ng-model="search" type="text" class="form-control" placeholder="Zoek uw locatie, restaurant" />
<i class="form-control-feedback glyphicon glyphicon-search"></i>
</div>
</form>
<table class="table">
<tr ng-show="search" ng-repeat="restaurant in restaurantlist | filter:search">
<td>
<a style="display: block;" ui-sref="restaurant.detail">
<img class="img-responsive" ng-src="{{restaurant.logo}}">
</a>
</td>
<td>
<a style="display: block;" ui-sref="restaurant.detail">
{{restaurant.name}}<br> {{restaurant.adres}}<br>
{{restaurant.place}}<br> {{restaurant.tel}}<br>
{{restaurant.website}}
</a>
</td>
</tr>
</table>
</article>
I've been trying to find a solution for a good 4 hours and can't figure out what is the best way to do this / how to do this. if you know a good solution please let me know, with if possible an example and some explanation
The app is online at check the app here
Resize your browser for a better picture
EDIT:
With the help of #thedoctor i now inserted his solution, and changed my html "ng-href" to ui-sref="restaurant.detail". I also added an ID to the restaurants. So how do i make a propper restaurantService?
What you need is to define another state which would show the view of an individual restaurant, it will be parameterized by the restaurant id (or something similar).
I am assuming that you have a service "restaurantService" which acts as the interface to the server, alternatively you can use $http or $resource directly.
.state('restaurant.detail', {
url: '/restaurants/:id',
templateUrl: 'view/restaurant.html',
controller: function($scope, restaurant){
$scope.restaurant = restaurant.data;
},
resolve: {
restaurant: function (restaurantService, $stateParams) {
return restaurantService.get({id: $stateParams.id});
}
}
}
I'm attempting to use ng-view to produce a simple slide effect between views. I am not sure If I am doing it right. The codes is as follows:
Script: (1.15)
<script src="js/lib/angular-1.1.5/angular.min.js"></script>
Routing:
app.config(function ($routeProvider) {
$routeProvider.
when("/", { templateUrl: "partials/loading.html" }).
when("/session", {templateUrl: "partials/session.html", controller: "TimerController" }).
when("/settings", { templateUrl: "partials/settings.html", controller: "SettingsController" }).
otherwise({ redirectTo: "/" });
HTML containing ng-view and ng-click used to switch views:
<div class="flex-container viewport">
<div class="flex-item-1">
<div>
<button class="overlay btn icon-cog" ng-click="changeView('/settings')" type="button"></button>
</div>
</div>
<div ng-view class="flex-item-2" ng-animate="{enter: 'enter', leave: 'leave'}"></div>
<div class="flex-item-3">
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(3)">
<span>3</span>
</button>
</div>
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(5)">
<span>5</span>
</button>
</div>
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(10)">
<span>10</span>
</button>
</div>
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(15)">
<span>15</span>
</button>
</div>
</div>
Controller fn used to switch views:
$scope.changeView = function (view) {
$location.path(view);
};
CSS used to implement animation effect:
.enter-setup {
position:absolute;
-webkit-transition: 3.3s ease-out all;
-webkit-transform:translate3d(100%,0,0);
}
.enter-setup.enter-start {
position:absolute;
-webkit-transform:translate3d(0,0,0);
}
.leave-setup {
position:absolute;
-webkit-transition: 3.3s ease-out all;
-webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
position:absolute;
-webkit-transform:translate3d(-100%,0,0);
}
The content still shows (but now with a flicker) and the slide animations do not work. Any help would be appreciated.
Update: I fixed the css syntax to 1.15. Unfortuneatly it still isn't working. I'm using flexbox and I'm thinking this is the cause of the problem. Anyone have similar problems when using ng-animate + flexbox?
You are using the 1.1.5 version, but the CSS sintaxe that you are using is from 1.1.4.
The correct is enter-active instead of enter-start and just enter instead of enter-setup
Take a look at the 1.1.5 documentation
And check some samples at NG Animate Sample Site
And if you use just -webkit-transform, this will work only in chrome and safari... Add the others vendors too.