Develop Reference

AngularJS unique tab data for each tab

I am pretty close to having this app finished, but have one last hurdle. I am dynamically populating tabs and data via the WordPress Rest API and when I only had 2 tabs it worked wonderfully, but when I added tab 3 and 4 I ran into issues. When I click tabs 2-4 all tabs receive the "active" class instead of just the one that was clicked; thus also all 3 tabs content data also displays.
Here is the code:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
homeApp.filter('stripTags', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
};
});
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy">
<h3>Meet the Characters</h3>
<div class="char_inject" ng-repeat="item in myData.data" ng-show="myData.tab === item.menu_order">
<div class="copy_wrap">
<h3>{{ item.acf.team }}:</h3>
<h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
<p class="hero_type">{{ item.acf.hero_type }}</p>
<div class="description" ng-repeat="field in item.acf.character_description">
<p>{{field.description_paragraph}}</p>
</div>
Learn More
</div>
<div class="image_wrap">
<img src="{{ item.acf.homepage_full_image.url }}" />
</div>
</div>
</div>
<div class="char_tabs">
<nav>
<ul ng-init="ch.tab = 0">
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<div class="tab_title_wrap">
<h3>{{ item.acf.characters_name }}</h3>
</div>
</a>
</li>
</ul>
</nav>
</div>
</section>
I would love any ideas! Thanks!

The code seems to work, see Fiddle. What are the values of menu_order? If they are the same for cases 2-4, then that would explain the behaviour.

ng-src doesn't render any value

I'm using angular 1.4.5 with django v1.8 app, and trying to implement new layout for my website.
Here is my view:
<div class="page animsition" ng-app="AppUI">
<div class="page-content padding-30 blue-grey-500"
ng-controller="DisplayManageController">
<ul>
<li ng-repeat="feed in items">
<a>{{ feed.type }}</a>
<img ng-src="feed.obj.image"/>
<em ng-bind="feed.obj.text"></em>
</li>
</ul>
</div>
</div>
And the angular controller code:
var AppUI = angular.module('AppUI');
AppUI.controller('DisplayManageController', ['$scope', 'display', function ($scope, display) {
$scope._display = display.items({'id': 71});
$scope.items = [];
$scope._display.$promise.then(function (result) {
angular.forEach(result, function (value) {
$scope.items.push(value);
});
});
}]);
And html result after promise updates
<li ng-repeat="feed in items" class="ng-scope">
<a></a>
<img ng-src="feed.obj.image" src="feed.obj.image">
<em ng-bind="feed.obj.text" class="ng-binding">Blabla #somehashtagfromme</em>
</li>
Here is the content of "items"
[
{$$hashKey:"object:3",group_id: 1,id: "562a1a48942fbd0d9016617e",obj:{image:"https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12080420_855923527854550_1926591603_n.jpg",text:"Nefesler tutuldu"},type:"instagram"},
{$$hashKey:"object:2",group_id: 1,id: "5627a75e942fbd0d7ed19748",obj:{image:"https://pbs.twimg.com/media/CR2VePxUwAAVqtn.jpg", text:"bu zamanların ruhu"},type:"twitter"},
...
]
ng-repeat repeats all items as feed objects, but why curly braces and ng-src doesn't compile or returns empty values ?
Ps: I also tried ng-src={{feed.obj.text}} but result doesn't change ..

It should be ng-src="{{feed.obj.text}}". That's quotes and double curly brackets.
If that doesn't work, paste <pre>{{feed.obj | json}}</pre> after the </a> and before the <img>. That will let you see problems with the object.
Also, since you're using Django make sure your rendering the template raw. Otherwise django will think that the double curly brackets are django templates.

Here is a plunker of your code working:
http://plnkr.co/edit/khgxkLt2FjskrguWP5Js?p=preview
You do need curly braces around items being interpolated.
<ul>
<li ng-repeat="feed in items">
<a>{{ feed.type }}</a>
<img ng-src="{{feed.obj.image}}"/>
<em ng-bind="{{feed.obj.text}}"></em>
</li>
</ul>

Angularjs and routeParams

I have a piece of code that is getting JSON data from a local server. I am trying to display those data into a page and then when i'll click on a product i want to see the details of it. So far i can display all my products into a page but when i'm heading to the details page i got an error Cannot read property 'id' of undefined. Can you please help me out?
This is my code so far.
app.js
'use strict';
angular.module('app', []).
config(function($routeProvider){
$routeProvider.
when("/", {templateUrl: "/partials/products.html"}).
when("/details/:id", {templateUrl: "/partials/details.html", controller: DetailsCtrl}).
otherwise({redirectTo: "/"});
})
function AppCtrl($scope, $http){
$http.get('http://localhost:3000/api/products/727617361726372')
.success(function(data){
$scope.productList = data;
/*$scope.filterProductsByCategory = function(category){
$scope.search = category
};*/
})
.error(function(data){
console.log("Error!: ");
});
}
function DetailsCtrl($scope, $routeParams){
$scope.item = $scope.productList[$routeParams.id];
}
details.html
<h2>This is the details pages</h2>
product id: {{ item.product_id }}
<br/>
product name: {{ item.product_name}}
index.html
<div class="container" ng-app="app" ng-controller="AppCtrl">
<h1 class="text-danger">Welcome to our Store</h1>
<hr/>
<ng-view></ng-view>
</div>
products.html
<div class="col-lg-4 col-sm-6 col-xs-12" ng-repeat="product in productList">
<div class="thumbnail">
<img src="img/img3.jpeg">
<div class="caption">
<h4>{{ product.product_name }}</h3>
<p>Category: {{ product.category_name }} ({{ product.category_id }})</p>
<p class="text-muted">{{ product.product_details}}</p>
<ul class="list-inline">
<li>
<p class="product-price btn">€ {{ product.product_price }}</p>
</li>
<li>
Add to Cart
</li>
</ul>
</div>
</div>
Thanks!!!

you are getting the productList in your AppCtrl. If you want to access a specific item in your DetailsCtrl you'll need to get the specific item since you can't access AppCtrl scope variables in another Ctrl.
The best way to do this would be to create an extra rest call for getting a single item.
A quick way to fix your code, although I really don't recommend it would be to use $rootcope in your AppCtrl
I'd suggest reading Angular Docs on $scope. It might give you a better understanding how scopes work in angular:
https://docs.angularjs.org/guide/scope#!

I assume you have injected ngRoute correctly.
angular.module('app', ['ngRoute'])
Other than that there is nothing wrong with your code.
Demo
Just check your code again.

Filtering a List via a Sidebar

There are two lists of items. One for your blog posts, and one for the authors.
var app = angular.module("Blog", []);
app.controller('PostCtrl', function($scope) {
$scope.posts = <%= #posts.to_json.html_safe %>;
$scope.authors = <%= #authors.to_json.html_safe %>;
});
The information is provided to us through a database via Rails. If you don't know Rails, assume that you have been given a big chunk of JSON to work with.
Now, we list the blog posts:
<div id="blog-posts" ng-controller="PostCtrl">
<article class="post" ng-repeat="post in posts">
<h1> {{ post.title }} </h1>
<small> By {{ post.author }} on {{ post.created_at }} </small>
<p> {{ post.body }} </p>
</article>
</div>
And then you decide to make an aside within the #blog-posts div (so that it is within the PostsCtrl) to list the authors:
<aside>
<h2> Authors </h2>
<ul>
<li ng-repeat="author in authors">
{{ author.name }}
</li>
</ul>
</aside>
Its nice that you're listing this and displaying the authors, but you also want to allow people to filter based on the author.
Key Question: How would one filter the blog posts when clicking on an author?

Hint: when the user clicks on an author (ngClick), put the author in a variable, that you can then use to filter the posts list.

Nested Angular Switches?

I'm building a MEAN SPA and the current page I'm working on displays the users in the database. I'm pretty new to Angular so I'm still trying to wrap my head around it.
I have a parent container of which the content is controlled by an <ng-switch> and switches to show the relevant content depending on whether the user has clicked 'view all' or 'add new'. This works fine.
What I'm aiming to do now is when the user clicks on a user that's displayed in 'view-all', I want the content to switch to a view containing that users details where they can then go and edit the profile etc. What would be the best way to achieve this?
My HTML is set up like so:
Main staff view
<div class="staff" ng-controller="staffController">
<div class="side-menu">
<h2>Staff</h2>
<ul>
<li><a ng-click="tab='view-all'"><i class="fa fa-user"></i> View All</a></li>
<li><a ng-click="tab='add-new'"><i class="fa fa-plus"></i> Add New</a></li>
</ul>
</div>
<div class="page-content" ng-switch on="tab">
<div ng-switch-when="view-all" class="tab-content">
<staff-view-all></staff-view-all>
</div>
<div ng-switch-when="add-new" class="tab-content">
<staff-add-new></staff-add-new>
</div>
</div>
</div>
Directives:
.directive('staffViewAll', function () {
return {
restrict: 'E',
templateUrl: 'partials/staff/view-all.ejs'
}
})
.directive('staffAddNew', function () {
return {
restrict: 'E',
templateUrl: 'partials/staff/add-new.ejs'
}
})
view-all.ejs
<h2>View all staff</h2>
{{ users.length }} users in system
<ul>
<li ng-repeat="user in users"> <!-- click this and you see the singular view -->
<img ng-src="{{user.avatar}}?dim=100x100" />
<h3>{{user.username}}</h3>
<h4>{{user.email}}</h4>
</li>
</ul>

Use another ng-switch to switch to detailed view for the selected user.
Something like this: jsfiddle
<div ng-switch-when="list">
<ul>
<li ng-repeat="fruit in fruits">
{{fruit}}
</li>
</ul>
</div>
<div ng-switch-when="details">
<p>Details for {{ selectedFruit }}</p>
Back to list
</div>
Controller:
$scope.showDetail = function (fruit) {
$scope.selectedFruit = fruit;
$scope.moduleState = 'details';
}
$scope.showList = function()
{
$scope.moduleState = 'list';
};