I'm new to AngularJS, I was trying a code with ng-repeat but got stuck because I need to pass the angular expression to a function but it is not working below is my code:
HTML code
<div ng-controller="Profile as pro">
<ul class="nav nav-tabs">
<li ng-repeat="tabs in tabArray"
ng-class="{active: pro.tab==1}"
ng-click=" pro.setTab({{tabs.value}})">
{{tabs.name}}
</li>
</ul>
<div>
Controller code
controller.controller('Profile', ['$scope',function ($scope) {
$scope.tabArray = [
{name:"Profile","value":1},
{name:"Education","value":2},
{name:"Work","value":3},
{name:"About","value":4}
];
this.tab=1;
this.setTab = function(tabSelected){
this.tab=tabSelected;
};
}]);
Use ng-click ="pro.setTab(tabs.value)"
Only proble in your code is in following line:
ng-click=" pro.setTab({{tabs.value}})" // don't use {{ and }} thing here, it is not needed
Following code is fixed version:
ng-click="pro.setTab(tabs.value)" // only {{ and }} are removed and it works well
Happy Helping!
There were some mistakes in your existing code ->
Since you are making use of ControllerAs syntax, you should refer with the variable used for the controller, with all the variables referenced in the view.
Here, in the ng-repeat of your model refer by pro.tabArray.
There is no need to pass the parameters in AngularExpressions, at the time of function/method call.
So, make use of ng-click="pro.setTab(tabs.value)", without the expressions.
HTML Code:
<li ng-repeat="tabs in pro.tabArray" ng-class="{'active': pro.tab==1}" ng-click="pro.setTab(tabs.value)">{{tabs.name}}</li>
In your JS too, you have referred some varibales with $scope and some with this. Be consistent with your code and do not mix it.
JS Code:
var app = angular.module('app', []);
app.controller('Profile', function ($scope) {
this.tabArray = [
{ name: "Profile", "value": 1 },
{ name: "Education", "value": 2 },
{ name: "Work", "value": 3 },
{ name: "About", "value": 4 }
];
this.tab = 1;
this.setTab = function (tabSelected) {
this.tab = tabSelected;
};
$scope = this;
});
Related
I have an angular ng-repeat that displays list items inside of an unordered list. Within each list item, I have another unordered list of sub-items. Inside each sub-item <li>, I have a div to display a name and a div to store a value.
I am trying to hook up the ng-mouseenter and ng-mouseleave attributes to the value div, but they aren't firing. Even just trying to execute a console.log statement inside of the directives is not printing anything to the console.
I have no page load errors, everything displays on the page fine so angular is set up correctly, it's just ng-mouseenter and ng-mouseleave are not firing.
What do I have to do in order to get ng-mouseenter and ng-mouseleave to properly fire?
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/SkillsetController.js"></script>
</head>
<body ng-app="mainApp">
<div id="skillset" ng-controller="SkillsetController">
<h2>{{title}}</h2>
<div class="skillListContainer" id="skillListContainer">
<ul class="skillCategoriesList">
<li class="skillCategory" ng-repeat="category in skillsetCategories">
<h3>{{category.title}}</h3>
<ul class="skillsList">
<li class="skill" ng-repeat="skill in category.skills">
<div class="skillName">
<span>{{skill.name}}</span>
</div>
<div class="skill-value" data-skill-value="{{skill.level}}"
ng-mouseenter="console.log('enter');"
ng-mouseleave="console.log('leave');">
{{skill.level}}
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
app.js
var app = angular.module("mainApp", []);
SkillsetController.js
app.controller("SkillsetController", ["$scope", function ($scope) {
$scope.title = "Skillset";
$scope.skillsetCategories = [
{
"title": "Backend",
"skills": [
{
"name": "Java",
"level": 10
}
]
},
{
"title": "Frontend",
"skills": [
{
"name": "HTML",
"level": 9
}
]
},
{
"title": "Frameworks",
"skills": [
{
"name": "jQuery",
"level": 9
}
]
},
{
"title": "Databases",
"skills": [
{
"name": "MySQL",
"level": 10
}
]
}
];
}]);
ng-mouseenter and ng-mouseleave work just fine in your code, just you can't call console.log in html directly, the functions you are using in your html template must be defined in your controller, try move console.log to your controller should resolve the problem.
index.html
<div class="skill-value" data-skill-value="{{skill.level}}"
ng-mouseenter="mouseEnter()"
ng-mouseleave="mouseLeave()">
{{skill.level}}
</div>
controller:
$scope.mouseEnter = function(){
console.log('enter');
};
$scope.mouseLeave = function(){
console.log('leave');
};
console.log() is not valid directly in the html
thats why you need to create those function to work
just change this add this function to your controller
$scope.mouseEnter = function(){
console.log("enter");
};
$scope.mouseLeave = function(){
console.log("leave");
};
and change this in the html
<div class="skill-value" data-skill-value="{{skill.level}}"
ng-mouseenter="mouseEnter()"
ng-mouseleave="mouseLeave()">
{{skill.level}}
</div>
Here is a example
I need to get the current object out of an ng-repeat on ng-click, I can't use $index because I'm using orderBy and therefore it gives me the wrong index relative to the scope object. Idealy I want to be able to click on the object (thumbnail) and have $scope.activePerson gain all that objects values.
My data is structured as follows:
[
{
'name': 'john'
},
{
'name': 'toby'
},
{
'name': 'sarah'
}
]
This is very much simplified, my real objects have 30+ KV pairs and subobjects. There are 10 objects that I'm repeating from (in batches of 4).
My current HTML is:
.item.fourth(ng-repeat="person in people | orderBy:'-name' " ng-show="$index <= 3" nid="{{person.guid}}"
Thanks
It's just person in ng-repeat="person in people";
I'm not sure what kind of markdown you're using, you definitely don't have html there, but you want something like:
<div
ng-repeat="person in people | orderBy:'-name' "
ng-show="$index <= 3"
nid="{{person.guid}}"
ng-click="activePerson = person">
</div>
Note that ng-repeat creates a child scope, so you'll want to have activePerson already set in the parent scope.
You can just use orderBy and copy the current object from ng-repeat, see this plunkr. Relevant code:
Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.stuff = [
{
'name': 'john'
},
{
'name': 'toby'
},
{
'name': 'sarah'
}
];
$scope.setActivePerson = function (obj) {
$scope.activePerson = obj;
};
});
View
<body ng-controller="MainCtrl">
<div ng-repeat="thing in stuff | orderBy: 'name'">
<input type="radio" ng-click="setActivePerson(thing)" />
{{ thing.name }}
</div>
<br />
<div ng-model="activePerson">Active: {{ activePerson.name }}</div>
</body>
I have a a collection of panels each with a simple list of items that needs to either be sorted by 'computedLoad' or 'Name'. I have the following objects and methods to accomplish this generically over all of the panels (only showing one panel among many).
scope.orderBy = {
name: {
displayName: "Name",
sort: "Name",
reverse: false
},
load: {
displayName: "Load",
sort: "-computedLoad",
reverse:false
}
};
scope.selectOrder = function (panel, order) {
timeout(function () {
panel.activeOrder = order;
});
};
scope.panels = {
methods: {
activeOrder: scope.orderBy.name
}
};
I have the following html:
<div>
<ul class="nav nav-pills">
<li class="list-label"><a>Order By:</a></li>
<li ng-repeat="order in orderBy">{{order.displayName}}</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="item in suite.Methods | orderBy:panel.methods.activeOrder.sort"><span class="text">{{item.Name}}</span></li>
</ul>
</div>
The selectOrder method doesn't seem to work. Any ideas? Am I missing something?
Here is an example: http://jsbin.com/puxoxi/1/
Setting panel.activeOrder happens asynchronously, so it is outside of angulars so called "digest cycle".
To make angular re-evaluate your scope, use the $apply function:
It could look like this:
scope.$apply(function() {
panel.activeOrder = order;
});
I am having the following array that i want to manipulate in DOM using Angularjs with some filters
$scope.urls = [{
path: 'http://a.com/index'
}, {
path: 'http://a.com/home'
}, {
path: 'http://a.com/etc'
}, {
path: 'http://a.com/all'
}];
I had tried to substring the path using filters but it is not working.
Fiddle Demo
Any help is great.
Try this one:
HTML
<div ng-controller = "fessCntrl">
<h1>Only path without domain name:</h1>
<ul>
<li ng-repeat="url in urls | myCustomFilter">{{url.path}}</li>
</ul>
</div>
JS
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function ($scope) {
$scope.urls = [{
path: 'http://a.com/index'
}, {
path: 'http://a.com/home'
}, {
path: 'http://a.com/etc'
}, {
path: 'http://a.com/all'
}];
$scope.otherCondition = true;
});
fessmodule.$inject = ['$scope'];
fessmodule.filter('myCustomFilter', function() {
return function( urls) {
var filtered = [];
angular.forEach(urls, function(url) {
filtered.push( {path:url.path.substring("http://a.com".length, url.path.length)});
});
return filtered;
};
});
Demo Fiddle
As a side note:
Try to write filters out of controller.
AngularJS v 1.4.5 supports a standard "limitTo" filter for arrays(including string) with parameters length and offset:
<div ng-controller = "SampleController">
<h1>Result of substring equivalent filter:</h1>
<ul>
<li ng-repeat="url in urls">{{url.path | limitTo:5:12}}</li>
</ul>
</div>
Note: This solution fails in case of dynamic domain length("http://a.com" static length of 12).
Note 2: Increase length to the maximum resulting length of path(Max is "index" having length of 5).
Overview of all filters supported by AngularJS out of the box.
I am new to angular and wanted advice on the best route to achieve something like this. This jsFiddle doesn't work but here is the idea.
I want tabs along the top with items available for selection. When you select the item, the data is populated below.
I wanted to have a ListController and an ItemController, so i can separate out the methods that act on the list vs that act on the item; since i wanted the items to be updatable directly. I am getting all the data on the page load, so i don't want to load each tab dynamically.
How can i do this and/or how can i fix the fiddle or new fiddle?
jsFiddle
plunker
<div ng-app="myApp">
<div ng-controller="ListController">
<ul class="nav nav-pills">
<li ng-repeat="artist in list">
<a show-tab="" ng-href="" ng-click="select(artist)">{{$index}} - {{artist.name}}</a>
</li>
</ul>
<div ng-controller="ItemController">
<p>{{name}} - {{selected.name}}</p>
<span>{{totalSongs}}</span>
<span>{{selected.songs.length}}</span>
<ul>
<li ng-repeat="song in selected.songs" ng-controller="ItemController">{{song}} - {{totalSongs}}</li>
</ul>
</div>
</div>
</div>
I would really like to keep the controllers separate and logic separate.
I created some functionality in the ItemController to illustrate how you could act on them separately:
http://jsfiddle.net/jdstein1/LbAcz/
Added some data to the list controller:
$scope.list = [{
name: "Beatles",
songs: [{
title: "Yellow Submarine",
time: "424"
}, {
title: "Helter Skelter",
time: "343"
}, {
title: "Lucy in the Sky with Diamonds",
time: "254"
}]
}, {
name: "Rolling Stones",
songs: [{
title: "Ruby Tuesday",
time: "327"
}, {
title: "Satisfaction",
time: "431"
}]
}];
And fleshed out the item controller:
app.controller('ItemController', ['$scope', function ($scope) {
$scope.selectItem = function (song) {
$scope.song.time++;
};
}]);