Angular JS ng-repeat - javascript

Working DEMO with Single List
Edit : Trying to Add Code Snippet IN JSON to Display in Front END as attached in the image.
can you please advice can we add ?
http://i.stack.imgur.com/Y2LOs.png
i have a list of data that has to be displayed in Listing, as of now i only have one object and only one li can add
can we render object in side a object just like this, i tried there is error.
"list":{
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
}
JSON :
[
{
"title" : "JavaScript ?",
"description" : "Hey, here are some of the merits of javascript",
"list" : "JavaScript is very easy to implement. All you need to do is put your code in the HTML document and tell the browser that it is JavaScript.",
"uploadedDate" : "April 12 2015",
"tags" : "javascript, webdevelopment"
}
]
JS :
var app = angular.module("jsBlogApp", []);
//Menu
app.service("headerMenu", function($http, $q) {
var deferred = $q.defer();
$http.get('json/headerMenu.json').then(function(data){
deferred.resolve(data);
});
this.getMenuItems = function (){
return deferred.promise;
}
})
.controller("headerMenuCtrl", function($scope, headerMenu){
var promise = headerMenu.getMenuItems();
promise.then(function(data){
$scope.headerMenuItems = data.data;
console.log($scope.headerMenuItems);
})
})
// Secondary Menu
app.service("secondaryHeaderMenu", function($http, $q) {
var deferred = $q.defer();
$http.get('json/secondaryHeaderMenu.json').then(function(data){
deferred.resolve(data);
});
this.getSecondaryMenuItems = function (){
return deferred.promise;
}
})
.controller("SecondaryheaderMenuCtrl", function($scope, secondaryHeaderMenu){
var promise = secondaryHeaderMenu.getSecondaryMenuItems();
promise.then(function(data){
$scope.SecondaryMenuItems = data.data;
console.log($scope.SecondaryMenuItems);
})
})
app.service("jsBlogService", function($http, $q) {
var deferred = $q.defer();
$http.get('json/data.json').then(function(data){
deferred.resolve(data);
});
this.getPlayers = function (){
return deferred.promise;
}
})
.controller("jsBlogCtrl", function($scope, jsBlogService){
var promise = jsBlogService.getPlayers();
promise.then(function(data){
$scope.items = data.data;
console.log($scope.items);
})
})
HTML :
{{menu.title}}
<div class="second__header">
<div class="second__header__wrap clearfix">
<div class="js__logo__wrap">
<h1 class="js__logo">JS Developer</h1>
<div class="js__logo__subtitle">~ codeJS </div>
</div>
<div class="c2f__nav__wrap" data-ng-controller="SecondaryheaderMenuCtrl">
<ul class="c2f__nav">
<li data-ng-repeat="menu in SecondaryMenuItems">
{{menu.title}}
</li>
</ul>
</div>
</div>
</div>
</header>
<section class="c2f__content clearfix">
<div class="c2f__cont_left">
<!--content starts-->
<div class="content__wrap" data-ng-controller="jsBlogCtrl">
<div data-ng-repeat="item in items">
<h2 class="title__head"> {{ item.title }}</h2>
<p class="desc__head">{{ item.description }}</p>
<p>Listing
<ul class="data__lisitng">
<li>
<span>{{ item.list }}</span>
</li>
</ul>
</p>
<div class="code"></div>
<span class="content__added__date">
{{ item.uploadedDate }}
</span>
<span class="content__tags">
<span class="tags__links__title">Tags - </span>
<span class="tags__links__desc">{{ item.tags }}</span>
</span>
</div>
</div>
</div>
</section>
<footer>
</footer>
</div>

I finally get what you were trying:
Here is a working plunkr: https://plnkr.co/edit/8TLDTV0OtE10hITr9Vf9?p=preview
JSON
[
{
"title" : "JavaScript ?",
"description" : "Hey, here are some of the merits of javascript",
"list" : [
{
"subtitle":"subtitle1",
"message":"message1"
},
{
"subtitle":"subtitle2",
"message":"message2"
}
] ,
"uploadedDate" : "April 12 2015",
"tags" : "javascript, webdevelopment"
}
]
HTML
<div class="content__wrap" data-ng-controller="jsBlogCtrl">
<div data-ng-repeat="item in items">
<h2 class="title__head"> {{ item.title }}</h2>
<p class="desc__head">{{ item.description }}</p>
<p>Listing
</p>
<ul class="data__lisitng">
<li ng-repeat="message in item.list">
<span>{{ message.message }}</span>
</li>
</ul>
<p></p>
<div class="code"></div>
<span class="content__added__date">
{{ item.uploadedDate }}
</span>
<span class="content__tags">
<span class="tags__links__title">Tags - </span>
<span class="tags__links__desc">{{ item.tags }}</span>
</span>
</div>
</div>

At least the list should be like this instead:
"list":[
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
];
I would prefer something like:
$scope.list = [
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
];

use '[' instead of '{'
[
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
]

"list":{
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
}
is not valid. Please use a valid object/array for ng-repeat

Related

Compile error for Angular JS with js/ajax.js and index.html

When I compile my code there is an error with angular.
The code is written from a book, and it works when I load the page using the code at the end of the question.
There seems to be two issues from what I have read. Where do I put the $scope and $compile code?
Mostly, the question is how do I load a document ready trigger with a button for angular JS?
Or should I always load the angular js and hide the code?
<div id="myTabs">
<div class="menu">
<ul class= "tabs">
<li >LIST</li>
<li >GRID</li>
<li >GRID</li>
</ul>
</div>
<div class="container" style="margin-top:100px">
<div id="a">
</div>
<div id="b">
<ul class="gallery-items" id="grid">
</ul>
</div>
<div id="c" >
<div ng-controller="myController">
<div ng-repeat="item in items">
<img ng-src="{{item.img}}" />
{{item.description}}<br>
Rating: {{item.rating}} stars<br>
<span ng-repeat="idx in stars"
ng-class=
"{true: 'star', false: 'empty'}[idx <= item.rating]"
ng-click="adjustRating(item, idx)">
</span>
<hr>
</div>
</div>
</div>
</div>
ajax.js has a function that calls the #c tab to load
$(document).ready(function(){
$('#listC').click(function(){
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.stars = [1,2,3,4,5];
$scope.items = [100];
$.ajax({
type:'post',
url:'changeView.php',
data:{action: 'getGrid'},
success:function(data){
var data = JSON.parse(data);
for (i=0;i<data.length;i++) {
var imageLI = makeImage(data[i]['imageID'], data[i]['name'], data[i]['desc']);
$scope.items[i] = imageLI;
}
}
});
console.log($scope.items);
$scope.adjustRating = function(item, value){
item.rating = value;
};
}]);
});
$('#listC').trigger('click');
function makeImage(ID, name, description){
var image = {
description: description,
img: '../uploads/'+name,
rating: 4
}
return image;

Using existing JS function in angular ng-repeat

I previously had a javascript function onclick="submitDynamicSku()" but we have recently started converting to Angular to use the controller to build off of and i want to be able to pass this function through since it is part of the my ng-repeat.
Example:
onclick="submitDynamicSku('x', document.getElementById('y').value, false, true);"
I wanted to try:
onclick="submitDynamicSku(product.sku, document.getElementById('{{ product.id').value, false, true);"
Current Code:
$scope.submitSku = function(sku,id,false,true) {
submitDynamicSku(sku, document.getElementById(id).value, false, true);
function submitDynamicSku(sku, cnt, recurringOrder, viewCart) {
jQuery("#dynamicAsstName").val("");
jQuery("#dynamicSku").val(sku);
jQuery("#dynamicSkuCount").val(cnt);
jQuery("#setRecurringOrder").val(recurringOrder);
jQuery("#viewCart").val(viewCart);
if (viewCart == false) {
jQuery("form[name='dynamic_add_to_cart_form']")
.submit(function() {
this.action = "";
return true;
});
}
jQuery("form[name='dynamic_add_to_cart_form']").submit();
}
}
<%--Angular Block--%>
<li ng-repeat="product in products">
<div class="prod-img ">
<img ng-src="{{ product.imagePath }}" alt="{{ product.imageAlt }}" ng-class="{{ product.selector }}" />
</div>
<div class="prod-info">
<h2>{{ product.name}}</h2>
<h3>{{ product.price }}</h3>
<p>{{ product.description }} </p>
<a class="fancybox" href="#prodDesc-{{product.id}}">More Information ยป</a>
<div class="prod-cart">
<span class="qty-amt">QTY: <input value="1" id="{{ product.id }}" /> BOX</span>
<button href="javascript:void(0);" ng-click="submitSku(product.sku,product.id,false, true)">Add to Cart</button>
</div>
</div>
</li>
Assuming you have apply ng-repeat on div
HTML:
<div ng-repeat="product in products ">
<button ng-click="submitDynamicSku(product.sku,product.id,false, true)">{{product}}"</button>
</div>
Controller:
.controller('products', ['$scope', function($scope) {
$scope.products=[];
$scope.submitDynamicSku = function(sku,id,false,true) {
.......
}
}]);
Create the function inside your controller like this:
$scope.submitDynamicSku = function(pID){
var elm = document.getElementById(pID);
....
}
Then in the HTML use ng-click: (assume you use ng-repeat on product)
ng-click="submitDynamicSku(product.id)"
/* Inside the Controller */
$scope.submitSku = function(sku,id) {
submitDynamicSku(sku, id, false, true);
};
/* HTML */
<a ng-click="submitSku(product.sku, product.id);">...</a>

How to add links in angular js with dynamic output

I have page say categories here I'm loading categories from my api request
on clicking first category I need to load some other page say products and need to load products from some other api.
When I am linking it with simple href it displays
{{ product.productname }}
MyController page :
var app = angular.module('myApp', []);
app.controller('CategoryController', function($scope, $http) {
$http.get("http://192.168.1.112/estore/api/get-categories")
.success(function(response) {$scope.categories = response.categories;});
});
app.controller('ProductController', function($scope, $http) {
$scope.id = 2;
$http.get("http://192.168.1.112/estore/api/get-products?id=id")
.success(function(response) {$scope.products = response.categories;});
});
My index page :
<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="CategoryController">
<ul class="cat" ng-repeat="x in categories">
<li>
{{ x.name }}
</li>
</ul>
</div>
</body>
my listpage :
<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="ProductController">
<ul class="cat" ng-repeat="pdts in products">
<li>
{{ pdts.productname }}
</li>
</ul>
</div>
</body>
There are two options:-
1) you can use $state.go() and pass id parameters to products state.
2) you can use $cookiestore and set the id in the cookie and later retrieve in the products state.
var app = angular.module('myApp', []);
app.config(['$stateProvider',function($stateProvider){
$stateProvider.state('products',{
url: '/products/:ID',
title: 'productlist',
templateUrl: 'app/views/product/productlist.html',
controller:'productlistController'
})
}]);
app.controller('CategoryController', function($scope, $http ,$state) {
$http.get("http://192.168.1.112/estore/api/get-categories")
.success(function(response){
$scope.categories = response.categories;
});
$scope.redirectTo = function(id){
$state.go('products', {ID : id});
};
});
app.controller('ProductController', function($scope, $http , $state) {
var id = $state.params.ID;
$http.get("http://192.168.1.112/estore/api/get-products?id="+id)
.success(function(response) {
$scope.products = response.products;
});
});
INDEX PAGE
<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="CategoryController">
<ul class="cat" ng-repeat="x in categories">
<li>
<a ng-click="redirectTo(x.id)"> {{ x.name }} </a>
</li>
</ul>
</div>
</body>

Cannot get angular.isString to work with ng-repeat

I'm trying to do an angular.isString comparison with ng-if inside an ng-repeat. But all items in the array are returned.
So I tried to just output the angular.isString result but it doesn't output anything.
Here is what I would like to do:
<li ng-repeat="item in data">
<div ng-if="angular.isString(item)">
{{ item }}
</div>
</li>
function MyCtrl($scope)
{
$scope.data =
[
"Hello",
"-",
123
];
}
Here's a fiddle: http://jsfiddle.net/m6k13whh/2/
Angular expressions are evaluated against the scope. You can create a function which returns angular.isString:
<li ng-repeat="item in data">
<div ng-if="isString(item)">
{{ item }}
</div>
</li>
$scope.isString = function(item) {
return angular.isString(item);
}
You can also just filter all of the items with that function:
<li ng-repeat="item in data | filter:isString">
<div>
{{ item }}
</div>
</li>
The best solution is to pass reference to angular method into scope
$scope.isString = angular.isString
then in partial you can just use ng-if="isString(item)"
http://plnkr.co/edit/5keCUQrHQnbl4Wg0oKp1?p=preview
Hej,
Make sure you only import one library.
Because in the fiddle you have include two angular scripts.
Remove the one in External Resources!
<div ng-app="myApp" ng-controller="MyCtrl">
<!-- this if comparison is what I want to do -->
<ul>
<li data-ng-repeat="item in data">
<div data-ng-if="isString(item)">
{{ item }}
</div>
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [
"Hello",
"-",
123
];
$scope.isString = function(value) {
return angular.isString(value);
};
});

AngularJS: Error: Unknown provider

Simple thing - works in the jsfiddle but not in my file. I'm trying to add some data to "factory" of the module and then use it within my controllers.
This is the relevant code:
var challengesApp = angular.module('challengesApp', []);
challengesApp.factory('Challenges', function() {
var challenges = [
{
'program': {
"num": "1",
"name": "aaa"
},
'challengeDesc': "desss",
'items': [
{title:"aaa",
desc:"bbb",
link: "www.google.com",
fiction: true},
]
}
];
return challenges;
});
function ChallengeCtrl($scope, Challenges) {
$scope.challenges = Challenges;
etc...
}
function ChallengeListCtrl($scope, Challenges) {
$scope.challenges = Challenges;
etc..
}
and the HTML:
<body ng-app="challengesApp">
<div ng-controller="ChallengeCtrl">
<div id="question">
<h2>{{ challenge.challengeDesc }}</h2>
<ul>
<li ng-repeat="item in challenge.items">
<strong>{{ item.title }}</strong> - {{ item.desc }}
</li>
</ul>
</div>
</div>
<div ng-controller="ChallengeListCtrl">
<div id="programs_list">
<ul>
<li ng-repeat="program in challenges | orderBy:orderProp:reverse">
<a href="" ng-click="changeChallenge(program)">
{{ program.program.num }} - {{ program.program.name }}
</a>
</li>
</ul>
</div>
</div>
<script src="js/main.js"></script>
</body>
anything here that I'm missing?
So, as I suspected, it was a dumb mistake. the <html> tag was:
<html ng-app>
blocking the correct ng-app attribute at the <body> tag.

Categories