I have created an AngularJS app that contains two columns: one for a menu and a second for content (each link in the menu links to). The content and menu is in a table in DynamoDB that I am scanning with a Lambda function. The output of this function is being consumed as a JSON response with the following structure:
{
"body": [{
"course-content": "RL front matter",
"course-video": "https://123-course-videos.s3.amazonaws.com/vid_1.mp4",
"course-id": "rcl",
"course-title": "sml",
"course-lesson": "Lesson One"
}, {
"course-content": "RL2 front matter",
"course-video": "https://123-course-videos.s3.amazonaws.com/vid_2.mp4",
"course-id": "rcl2",
"course-title": "sml",
"course-lesson": "Lesson Two"
}, {
"course-content": "RL3 front matter",
"course-video": "https://123-course-videos.s3.amazonaws.com/vid_3.mp4",
"course-id": "rcl3",
"course-title": "sml",
"course-lesson": "Lesson Three"
}]
}
I (with the help of the great folks here) built the following controller that loops through the response and builds the menu:
controller
app.controller('menu', function($scope, $http) {
$http.get('api address').
then(function(response) {
$scope.navi = response.data.body;
$scope.selectCourse = function(course, index, path) {
console.log(path)
$scope.content = response.data.body[index]
console.log($scope.content)
};
});
});
menu built using ng-repeat
<div ng-repeat="nav in navi">
<ul><li>{{ nav['course-lesson'] }}
<button ng-click="selectCourse(nav, $index, '/content/' +
$index)">Select</button>
</li></ul>
</div>
This build the following menu:
Lesson One <button>
Lesson Three <button>
Lesson Two <button>
And I am using a second controller that consumes the content from the same api call:
app.controller('content', function($scope, $http) {
$http.get('api address').
then(function(response) {
$scope.content = response.data.body;
});
});
content is displayed in a route with a simple content.html template as follows:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
})
.when("/content/:id", {
templateUrl : "templates/content.html",
controller : "content"
});
Updated: Here is where I still need help:
How do I pass/use the $index variable in the menu controller to the content controller so the content updates as needed in the right template when I click on each button?
To help better understand the functionality:
Lesson One links to content for lesson one - lesson one content is
displayed in the content template.
List item Lesson Two links to content for lesson two - lesson two content is
displayed in the content template.
List item Lesson Three links to content for lesson three - lesson three content
is displayed in the content template.
Sorry for the long post, but I wanted to provide enough detail to help clarify any confusion.
To pass data to a controller from an ng-repeat element, use the ng-click directive:
<div class="col-4" ng-controller="menu">
<div ng-repeat="nav in navi">
<ul>
<li>
{{ nav['course-lesson'] }}
<button ng-click="selectCourse(nav, $index)">Select</button>
</li>
</ul>
</div>
Assign the function to scope:
$scope.selectCourse = function(course, index) {
console.log(course, index);
};
For more information, see
AngularJS ng-click Directive API Reference
Related
I am trying to make a simple list display, but I am having some concerns about Controllers organization.
In my application, I have 2 states, items and state2. In items, I want to display a list of Items, and "something else" in state2.
But I also have a + button at the top of my application that can add an item to my list. And I want that button to be displayed in both states. Here is an illustration:
Now, I would like to put my items related functions, in a specific controller ItemsCtrl. So this would be my routes:
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/items");
$stateProvider
.state('items', {
url: "/items",
templateUrl: "partials/items.html",
controller: "ItemsCtrl"
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html",
controller: "State2Ctrl"
});
});
And this would be my ItemsCtrl:
myApp.controller('ItemsCtrl',function($scope){
$scope.items = ["One",'Two'];
})
And now, I make a new MainCtrl to handle the + button that should be present on any page:
myApp.controller('MainCtrl',function($scope){
$scope.promptItem = function(){
var result = prompt('Add Item', 'New Item', ['ok'], 'Zero');
$scope.items.push(result.input1); //This line doesn't work
}
})
What is the best organization for this kind of interface? Do I really need to put my $scope.items in my MainCtrl?
I'd rather not, and the best thing I think would even be to put the promptItem function in ItemsCtrl, what do you think?
Thanks a lot for your answers, I am completely new to this world :)
EDIT: Here is my HTML structure, my + button is in the root file:
<button ng-click="promptProduct()">Add Item</button>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<div ui-view></div>
This is probably a great place to leverage an Angular service. The problem from what I understand is that you are struggling to share state between different parts of your application. I would recommend creating, e.g. a ListService, as such:
myApp.service('ListService', ListService);
function ListService () {
this.list = ['One', 'Two'];
}
ListService.prototype = {
addItemToList: function (newThing) {
var item = // some initialization of an item from the passed value
this.list.push(item);
}
};
You can then inject ListService anywhere you need access to the data itself. Both the list view and the state2 need it -- the former to actually render the list, and the latter to modify its contents. The method I described above lets you separate the data (the list itself) from the presentation / UI interaction.
[edit]
Likewise, if you want a button that lets you add a new item in both of your views, you could create a directive that receives ListService and prompts the user with a modal when clicked.
I'm using this AngularGrid system and everything is working so far, except when i refresh the page.
In the doc there is an orientation on how to solve this:
To get the reference of instance you need to define angular-grid-id on the element which you can get back by injecting angularGridInstance to any controller or directive. Using your id you can refresh your layout ex : angularGridInstance.gallery.refresh();
And this is what I did:
html
<ul class="dynamic-grid" angular-grid="pics" angular-grid-id="mypics" grid-width="300" gutter-size="10" refresh-on-img-load="false" >
<li data-ng-repeat="port in Portfolio" class="grid" data-ng-clock>
<img src="{{port.img[0]}}" class="grid-img" />
</li>
</ul>
app.js
.directive('myPortfolio', ['mainFactory','angularGridInstance', function (mainFactory,angularGridInstance) {
return {
restrict: "A",
link: function($scope) {
mainFactory.getPortfolio().then(function(data) {
$scope.refresh = function(){
angularGridInstance.mypics.refresh();
}
$scope.pagedPortfolio = data.data;
})
}
}
}])
But if I refresh the page, it still doesn't work. There is some boxes but without image loaded and it's not inside the grid system. Also, I have no errors in my console. When this happens, I can only see the images again if I change to another page and then go back to my portfolio page.
Any ideas on how to solve this?
I think you don't need angularGridInstance and refresh function here. Just change
refresh-on-img-load="false"
to
refresh-on-img-load="true"
in your view.
I have three tabs(Article(s), Visitor(s), Subscription(s)) and a common place of pagination; where each tab data will be provided with pagination. On click of the respective tab; respective ng-view are coming to picture and controllers are responding properly. For this custom made pagination; i want to update the number if <li> accordingly on the basis of the server response(number of pages available for next pagination).
<div ng-app="myLibrary">
<ul>
<li>Article(s)</li>
<li>Visitor(s)</li>
<li>Subscription(s)</li>
<li>
<ul> //will behave as pagination toolbar and each <li> represents a page; after a minimum of 5 pages; i will add a combo(as in plan) to cater more page(s)
<li ng-repeat="tPageObj in recordPageNumbers">
<span ng-click="fetchPage(tPageObj.pageIndex)">{{ tPageObj.pageIndex }}</span>
</li>
</ul>
</li>
</ul>
</div>
<div ng-view></div>
When the view is rendered(after getting the data from server; i have a array with the $scope ($scope.recordPageNumbers) and calculating the page(s) accordingly. Even in the console; it shows appropriate number of page(s); but i am unable to figure-out why the ng-repeat is not behaving(as i learned so-far; being two way binding modification in the model will trigar the view update) as it should.
var myLibrary = angular.module('myLibrary', ['ngRoute', 'ngTable']);
myLibrary.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',
{ templateUrl : 'angular-view/article.html', controller : 'articleList' } );
$routeProvider.when('/articleManager',
{ templateUrl : 'angular-view/article.html', controller : 'articleList' } );
$routeProvider.when('/visitorManager',
{ templateUrl : 'angular-view/visitor.html', controller : 'visitorList' } );
$routeProvider.when('/subscriptionsManager',
{ templateUrl : 'angular-view/subscriptions.html', controller : 'subscriptions' } );
}]);
myLibrary.controller('articleList', function($scope, $http){
$scope.articleListArray = [];
$scope.recordPageNumbers = [];
$http.get('ngMyLibrary.do?action=ALLARTICLE')
.success(function(response) {
$scope.articleListArray = response.data; //sending data to `ng-view`
var totalPageCount = response.totalPageCount;//calculating pages and according creating the `recordPageNumbers` array.
if(totalPageCount){
for(var counter = 1; counter <= totalPageCount; counter++)
$scope.recordPageNumbers.push({pageIndex : counter, disableButton : false});
} else {
$scope.recordPageNumbers.push({pageIndex : 1, disableButton : true});
}
console.log($scope.recordPageNumbers); //console show as expected
}
);
});
Console:
[Object { pageIndex=1}, Object { pageIndex=2}, Object { pageIndex=3}, Object { pageIndex=4}, Object { pageIndex=5}, Object { pageIndex=6}]
I tried with {{ $index }} as the loop index of the ng-repeat but it din't work as well. Please help. I am newbie to ng; hence could not figure out the way to check within the ng-repat tag through debug.
Without seeing the full project structure it is a bit difficult to know. But have you checked to see if the controllers scope covers the HTML you are trying to use?
For example update the first line to be
<div ng-app="myLibrary" ng-controller="articleList">
It could be that the way you have it set up with the routing, the controller is only being responsible for the HTML being injected into the ng-view part of the page.
New to AngularJS I have a simple directive, service and controller. I loop through a list of items from a database in the controller embedded in the directive to render a checkbox list of items. From a form I am able to update my list of items in the database. I would at the same time like to update my list of displayed items with the newly added item and was hoping to benefit from Angulars two-way binding but I can't figure out how...
My directive:
angular.module('myModule').directive('menu', function (menuService) {
return {
restrict: 'E',
templateUrl: '../templates/menu.html',
controller: function () {
var me = this;
menuService.getMenuItems().then(function(data) {
me.items = data;
});
},
controllerAs: 'menu'
};
});
and corresponding html:
<div ng-repeat="item in menu.items">
<div class="col-md-4" ng-if="item.menuItem">
<div class="checkbox">
<label for="{{item._id}}">
<input id="{{item._id}}" type="checkbox" name="menuItems" ng-model="menuItems[$index]" ng-true-value="{{item._id}}">
{{item.menuItem}}
</label>
</div>
</div>
</div>
My issue is now that if I add a new item using this controller
EDIT: On my page I have two things. 1: A list of items rendered using the directive above and 2: A simple form with a single input field. I enter a new menuItem and click "Save". That triggers the controller below to be called with the new menuItem. The menuItem is then added to a collection in my database but I would like the list on my page to update with the newly added item. Preferably without having to reload the entire page.
$scope.insertMenuItem = function () {
$http.post('/menuItems', $scope.formData)
.success(function (data) {
$scope.items = data;
});
};
then the "me.items" in my directive remains unchanged hence so does my list in my browser.
How do I "tie it all together" so that when I call insertMenuItem then my.items are updated automagically?
This didn't come out as well as I had hoped but I hope you get the meaning...
Thanks in advance
take a look at this http://jsbin.com/rozexebi/1/edit, it shows how to bind a list of items in a directive to a controller, hope it helps.
I'm currently playing around with rewriting the functionality of an existing page using Angular. The gist of it is that I have a plain HTML page with a list of stuff, like this:
<ul>
<li class="item">
<h1>Foo</h1>
<ul class="categories">
<li class="category">Bar</li>
</ul>
</li>
...
</ul>
This is augmented by some Javascript which parses this data once and adds a dynamic category filter menu to the page. I.e. it extracts all li.category elements and displays a menu with them, and clicking on one of these categories filters the item list to display only items with the chosen category.
I've replicated the basics of that in Angular with a lot less code than I had before. However, I'm still doing a lot of jQuery traversing of the .item elements to build that initial list of categories:
myApp.controller('MyController', function ($scope) {
$scope.categories = [];
angular.element('.item').each(function () {
angular.element(this).find('.categories .category').each(function () {
var category = this.textContent;
for (var i = 0, length = $scope.categories.length; i < length; i++) {
if ($scope.categories[i].name == category) {
$scope.categories[i].count++;
$scope.categories[i].items.push(this);
return;
}
}
$scope.categories.push({ name : category, count : 1, items : [this] });
});
});
});
This does not seem to be in the spirit of Angular, and I'd like to replace it with something like:
<ul>
<li class="item" ng-item>
<h1>Foo</h1>
<ul class="categories">
<li class="category" ng-category>Bar</li>
</ul>
</li>
...
</ul>
A directive should then be able to parse all ng-item/ng-category elements and add them to the model/scope once. Something like ng-model, but for static data.
I have virtually no experience with Angular, how can I accomplish this; or shouldn't I want to do something entirely different in the first place?
For creating your own ng-item and ng-category directives, I suggest that you can go through Creating Custom Directives part in Angular Offical Develop Guide:
http://docs.angularjs.org/guide/directive
It will tell you how to begin creating your directive from add directive to module like this:
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
Edit:
This two is also useful tutorial:
http://www.ng-newsletter.com/posts/directives.html
http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/
Edit2:
To answer your comment:
Do you have a concrete sample of how I'd write a directive that reads data from its element and modifies the controller's scope?
I thought that it has clear explanation in Angular Official Guide:
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});
In this example:
restrict: 'E' : directive name match element name
So directive look like this:
<my-customer></my-customer>
scope: { customerInfo: '=info'}
<my-customer info="myInfo"></my-customer>
this will bind myInfo to scope just like this expression:
$scope.customerInfo = myInfo;
this is a concrete sample of how to read data from its element and modify the controller's scope.