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.
Related
I am creating dynamic tabs using ajax data loaded via the WordPress REST-API. Everything is working, but I need to add a class to the active tab in order to use CSS transforms on it.
I would appreciate any suggestions. I know how to use ng-class when clicking one element affects another, but not when it affects the clicked element. It's also worth noting I am using the 'as' syntax for the ng-controller.
JAVASCRIPT:
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('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
I am trying to add the class to the li element. I appreciate any help!
You can use ng-class like
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>
For more options you can visit
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
in your js
$scope.activate = function(index){
document.getElementsByClassName.setAttribute("class","tab");
document.getElementsByClassName[index].setAttribute("class","tab active");
}
im struggling with iterating over arrays in arrays. I need to create buttonlike vertical menu and cant get it work.
angular.module('NavigationApp',[]).controller('NavigationController', function($scope) {
$scope.items = [
'Home',
'Orders':
{
orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten']
},
'Users',
'Resources',
'Settings',
'Help'
];
$scope.activeMenu = $scope.items[0];
$scope.setActive = function(item) {
$scope.activeMenu = item;
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="NavigationApp">
<div class="col-md-3">
<div ng-controller="NavigationController">
<input type="text" placeholder="Search" ng-model="filterQuery" />
<ul class="list-group">
<li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items | filter:filterQuery">{{ item }}
</li>
</ul>
</div>
</div>
<script src="js/MainController.js"></script>
</body>
</html>
What i need to do is display array of items and while Orders item is active expand it with elements given in other array. To be honest i just dont know how to make it.
You are trying to ng-repeat over a heterogeneus array. i.e. it's elements are not all of the same type. The implementation logic needs to change here.
One thing you can do if your data structure is not flexible, is to use a typeof item === 'object' to filter out the object from the strings, or conversely check for typeof string
Here's a quick, basic example of what you could use:
$scope.items = [{
name: 'Home'
}, {
name: 'Orders',
dropdown: [{
name: 'Orders'
}]
},{
name: 'Users'
},
...
];
<li ng-repeat="item in items | filter:filterQuery" class="btn btn-lg list-group-item dropdown" ng-class="{active: activeMenu === item}" ng-click="setActive(item)">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
{{ item.name }} <span class="caret" ng-if="item.dropdown"></span>
</a>
<ul ng-if="item.dropdown" class="dropdown-menu">
<li ng-repeat="dItem in item.dropdown">
{{dItem.name}}
</li>
</ul>
</li>
I'd suggest having another indepth look at https://docs.angularjs.org/api/ng/directive/ngRepeat to fully understand the structure required by the directive.
angular.module('NavigationApp',[]).controller('NavigationController', function($scope) {
$scope.items = {
main:['Home','Orders','Users','Resources','Settings','Help'],
sub:['Open','Closed','New','Forgotten']
};
$scope.activeMenu = $scope.items[0];
$scope.setActive = function(item) {
$scope.activeMenu = item;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="NavigationApp">
<div class="col-md-3">
<div ng-controller="NavigationController">
<input type="text" placeholder="Search" ng-model="filterQuery" />
<ul class="list-group">
<li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items.main | filter:filterQuery">{{ item }}
<ul>
<li class="btn btn-lg list-group-item" ng-repeat="it in items.sub" ng-if="activeMenu === 'Orders'">{{it}}</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="js/MainController.js"></script>
</body>
</html>
This is closer to what i want to achieve. But i dont know how to apply this nested UL to only one Li from parent list.
this filter work correctly
INPUT :
['Home',{ 'Orders':{orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten']}},'Users','Resources','Settings','Help']
OUTPUT :
["Home", "Orders", "Open", "Closed", "New", "Forgotten", "Users", "Resources", "Settings", "Help"]
app.filter('customfilter', function () {
return function (data) {
function clean(item)
{
var result = [] ;
// check if type is array
if(Array.isArray(item)){
// parse array
item.forEach(function(i){
result = result.concat(clean(i));
})
}// check if type is opject
else if(typeof item =="object"){
// parse opject
Object.keys(item).map(function (key) {
result = result.concat(clean(item[key]));
});
}else{
result= [item]
}
return result ;
}
return clean(data) ;
}
})
I believe there are so many ways to answer this question,although I've made a sample plunker for your problem.Below is how your
HTML will look like
<body ng-app="NavigationApp">
<div class="col-md-3">
<div ng-controller="NavigationController">
<input type="text" placeholder="Search" ng-model="filterQuery" />
<ul class="list-group">
<li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items | filter:filterQuery">
<a href="#">
<p ng-hide="item.dropdown"> {{ item.name }}</p>
<p ng-show="item.dropdown" ng-repeat="values in item.dropdown"> {{ values }}</p>
</a>
</li>
</ul>
</div>
</div>
</body>
JS look like
angular.module('NavigationApp', []).controller('NavigationController', function($scope) {
var orderItemsObj = {
orders: ['Orders', 'Open', 'Closed', 'New', 'Forgotten']
};
$scope.items = [{
name: 'Home'
}, {
name: 'Orders',
dropdown: ['Orders', 'Open', 'Closed', 'New', 'Forgotten']
}, {
name: 'Users'
}, ];
$scope.activeMenu = $scope.items[0];
$scope.setActive = function(item) {
$scope.activeMenu = item;
};
});
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
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);
};
});
I'm using : https://github.com/angular-ui-tree/angular-ui-tree
I want to accept:
Categories to root scope of ui-tree
apps to the apps of same categories.
My controller is (partial):
//Accept Categories at root scope and accept apps only inside same category
$scope.options = {
accept: function(sourceNodeScope, destNodesScope, destIndex) {
//todo check nodes and return
alert('called');
$log.debug("sourceNodeScope");
$log.debug(sourceNodeScope);
$log.debug("destNodesScope");
$log.debug(destNodesScope);
return false;
},
dropped: function(event) {
},
beforeDrop: function(event) {
}
};
My HTML is:
<div ng-controller="CpoTreeViewCtrl">
<div>
<script type="text/ng-template" id="apps_renderer.html">
<div ui-tree-handle>
{{app.name}}
</div>
</script>
<script type="text/ng-template" id="category_renderer.html">
<div ui-tree-handle >
{{category.name}}
</div>
<ol ui-tree-nodes ng-model="category.apps">
<li ng-repeat="app in category.apps" ui-tree-node ng-include="'apps_renderer.html'">
</li>
</ol>
</script>
<div ui-tree="options">
<ol ui-tree-nodes ng-model="treeData" id="tree-root">
<li ng-repeat="category in treeData" ui-tree-node ng-include="'category_renderer.html'"></li>
</ol>
</div>
</div>
</div>
I want to accept:
Categories to root scope of ui-tree
apps to the apps of same categories.
The accept callback is not getting fired. What's not right here?
Thanks!
If anyone is wondering how to restrict by groups, here's how I got it working. The docs leave a bit to be desired on how to do this.
here is the html markup
<div ng-repeat="list in lists" >
<div ui-tree="treeOptions" class="col-xs-6" >
<ol ui-tree-nodes ng-model="list.categories" data-type="{{list.type}}">
<li ng-repeat="item in list.categories" ui-tree-node data-type="{{item.type}}">
<div ui-tree-handle class="tree-node">
<div class="tree-node-content">
{{item.name}}
</div>
</div>
</li>
</ol>
</div>
<div class="clearfix" ng-if="::$index===1"></div>
</div>
for a sample item array such as
$scope.lists = [{
"name": "Selected Charts",
"type": "charts",
"categories": [{
"name": "222 docs",
"type": "charts"
}]
}, {
"name": "sdf",
"type": "tables",
"categories": [{
"name": "2222 docs",
"type": "tables"
}]
}];
then in tree options, define
$scope.treeOptions = {
accept: function(sourceNodeScope, destNodesScope, destIndex) {
var srctype = sourceNodeScope.$element.attr('data-type');
var dsttype = destNodesScope.$element.attr('data-type');
if(srctype===dsttype){
return true;
}else{
return false;
}
}
};
That will prevent non-matching types from dropping.
The API of this awesome package is updated and same was not available in doc/demo.
Details : https://github.com/angular-ui-tree/angular-ui-tree/pull/281
Quick Fix :
<div ui-tree="options">
should be replaced with
<div ui-tree callbacks="options">
Update (with thanks to #zach-l)
After v2.8.0 you need to switch back to
<div ui-tree="options">
I would do this.
accept: function(sourceNodeScope, destNodesScope) {
return sourceNodeScope.$parent.$id === destNodesScope.$id;
}