Is it possible to do the following:
<li><a ng-click="letterFilter = {section:'{{bound.value}}'}">{{bound.value}}</a></li>
to get the following output using ng-repeat and a JSON file to supply the data via $http
<li><a ng-click="letterFilter = {section:'A'}">A</a></li>
<li><a ng-click="letterFilter = {section:'B'}">B</a></li>
Thanks
Additional Information:
JSON
[{"section": "A"},{"section": "B"},{"section": "C"}]
HTML
<ul ng-controller="letterController" class="pagination">
<li ng-repeat="letter in letters"><a ng-click="letterFilter = {section: letter.section}">{{letter.section}}</a></li>
</ul>
app.js
.controller('letterController',['$scope','$http',function($scope,$http){
$http.get('data.json').success(function(data){
$scope.letters= data;
})
}])
ng-click evaluates an angular expression, so just reference the variable directly without the {{ }}. For example:
<a ng-click="letterFilter = { 'section': bound.value }">{{bound.value}}</a>
Related
I have been using ng-repeat for adding repeated list items in my code. But, I am not getting how to add a class to just one of the elements.
I am looking for something like this.
<div class="events-wrapper">
<div class="events">
<ol>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
</ol>
<span class="filling-line" aria-hidden="true"></span>
</div>
<!-- .events -->
</div>
<!-- .events-wrapper -->
I have done this:
<div class="events-wrapper">
<div class="events">
<ol>
<li ng-repeat = "dt in time">
{{dt.dc}}
</li>
</ol>
<span class="filling-line" aria-hidden="true"></span>
</div>
<!-- .events -->
The accompanying js is
var app = angular.module('timelineApp', [])
app.controller('tryCtrl', function ( $scope, $http ) {
$http({
method: 'get',
url: '../json/timeline.json'
}).then(function (response) {
$scope.time = response.data.timeline;
})
})
The elements properly repeat. But, I want to initialize this by adding the selected class to the first element?
You can use the ng-class directive in combination with ng-repeat's $first attribute to set a class selected only for the first element that is produced by the repetition.
<li ng-repeat="dt in time" ng-class='{selected:$first}'>
{{dt.dc}}
</li>
$first is a special property that is automatically exposed on the local scope when you use ng-repeat.
If you want multiple selections from an array, use $index:
<li ng-repeat="dt in time" ng-class='{selected: itemSelected[$index]}'>
{{dt.dc}}
</li>
I want to toggle a boolean by click event using Angular.
This is my the code
<div class="nav_mobile" ng-click="mobilestatus.navActive = (mobilestatus.navActive == false) ? true : false">
</div>
<nav>
<ul class="nav_mobile_list" ng-class="{active: mobilestatus.navActive}">
<li><a ui-sref="about" ng-click="mobilestatus.navActive = false">About</a></li>
<li><a ui-sref="contact" ng-click="mobilestatus.navActive = false">Contact</a></li>
</ul>
</nav>
The controller looks like this
angular.module('app').controller('NavCtrl', function ($scope){
$scope.mobilestatus = {navActive: false};
});
I also tried other shorthand notations. The initial value of navActive is false. The ng-click on nav_mobile makes the navActive attribute true the first time, but when clicking again, it doesn't return back to false. When clicking on the li items, the navActive does return back to false. Any suggestion is appreciated.
Try this statement
ng-click="mobilestatus.navActive = !mobilestatus.navActive"
EDIT
If you have no idea of whats going on inside your code try to debug it. Use function call instead of angular's DOM expression and log output into console. Also you can use breakpoints.
HTML
ng-click="toggle()"
Controller
$scope.toggle = function toggle() {
$scope.mobilestatus.navActive = !$scope.mobilestatus.navActive;
console.log('Status is ' + $scope.mobilestatus.navActive);
};
You will see if this code is executable and $scope.mobilestatus is available to html part.
EDIT
Here is plunker
Check this solution:
<div class="nav_mobile" ng-click="mobilestatus.navActive = !mobilestatus.navActive">
Test- {{mobilestatus.navActive}}
</div>
<nav>
<ul ng-class="{'active': mobilestatus.navActive, 'inactive': mobilestatus.navActive}">
<li><a ui-sref="about" ng-click="mobilestatus.navActive = !mobilestatus.navActive">About</a></li>
<li><a ui-sref="contact" ng-click="mobilestatus.navActive = !mobilestatus.navActive">Contact</a></li>
</ul>
</nav>
The following code is giving me Error: [$parse:syntax] in console.
<ul class="nav navbar-nav" ng-repeat="webpage in first.webpages">
<li><a href ng-click="tab = {{webpage.id}}">{{webpage.name}}</a></li>
</ul>
ng-repeat is properly working for {{webpage.name}} only, not for {{webpage.id}} which is placed inside ng-click directive. When I try to print {{tab}} nothing shows up.
I believe you don't need double braces inside angular elements. And you need to call the parent scope when in ng-repeat :
ng-click="$parent.tab = webpage.id"
It should be:
<ul class="nav navbar-nav" ng-repeat="webpage in first.webpages">
<li><a href ng-click="tab = webpage.id">{{webpage.name}}</a></li>
</ul>
You don't need to interpolate anything when you are inside ng-click since it does it for you.
I have a situation where i am sorting data on the basis of expression:
html :
<ul>
<li ng-click="expression = 'created_at'" ng-class="latest_icon: 'selected'" >latest post</li>
<li ng-click="expression = 'popularity'" ng-class="popular_post: 'selected'" >popular post</li>
</ul>
<div ng-repeat = "data in posts | orderBy::expression:true">
//showing data
</div>
So whenever user click on one of the list wheather it is popular or latest ,selected class will be activated. How could i give expression to ng-class so that selected class on list get activated. this is without ng-repeat where i can use $index and onselect we can active class. how can i do this here?
I am not sure which class you want to apply but you can do something like
<ul>
<li ng-click="expression = 'created_at';selectedOption='latest'" ng-class="{latest_icon:true, 'selected':selectedOption=='latest'}" >latest post</li>
<li ng-click="expression = 'popularity';selectedOption='popular'" ng-class="{popular_post:true, 'selected':selectedOption=='popular'}" >popular post</li>
</ul>
Here we create a variable selectedOption on the scope, set it's value on ng-click and check it in ng-class expression.
Here is an example of a conditional ng-class attribute from my code.
div(ng-class="{'fixed':isFixed}")
So from this I reckon your code should look something like this:
<ul>
<li ng-click="expression = 'created_at'" class="created_at" ng-class="'selected' : expression=='created_at'" >latest post</li>
<li ng-click="expression = 'popularity'" class="popular_post" ng-class="'selected' : expression=='popularity'" >popular post</li>
</ul>
I was doing some syntax error. We can simply resolve this
<ul>
<li ng-click="expression= 'created_at'" ng-class= "latest_icon : expression == 'created_at'">Latest </li>
<li ng-click="expression= 'popularity'" ng-class= "popular_icon : expression == 'popularity'">Latest </li>
</ul>
Here latest_icon and popular_icon are classes name which activate according to selected list.
Basically, what I am attempting to do is create a Slideshow. The reason why I am using Angular for this is to get the benifits from templating and hopefully load only one template to the page at a time.
I have my data in a JSON file which the controller gets:
JSON:
{
"prop_title" : "Hyde Lane, Hyde",
"prop_postcode" : "SP2 7AP",
"prop_price" : "",
"prop_image" : "",
"prop_desc" : "",
"template" : "views/prop-thumbs.html",
"info_image" : "",
"duration" : "4000"
},
Controller:
function AppCtrl($scope, $http) {
//GET THE JSON FILE
$http.get('json/pages.json').success(function (data) {
//ASSIGN THE PAGES TO THE SCOPE
$scope.pages = data;
//LOOP THROUGH THE DATA AND ASSIGN THE VIEW
for (var i = $scope.pages.length - 1; i >= 0; i--) {
};
});
}
As you can see from my JSON file, each element contains the view file to use, and the duration that it needs to stay on screen for. Also, as you can see in my controller, I have begun creating a for loop that will hopefully contain my code that will assign view on a timer. Is this possible? Whats the easiest and best way to do this?
Any help seriously appreciated, I have pretty tried everything now!
as Mark Rajcok pointed in the comments, you will probably need to use a $timeout
Here is what I would have done : http://jsfiddle.net/DotDotDot/zbg57/
The html part is quite simple, I just tell angular to include what is in the whatToInclude variable :
<div ng-include='whatToInclude'></div>
On the controller side, I initialize the data with a template and a counter, then I define a nextSlide function, which will call the next template with the timeout passed in parameter. I call this function to start the loop with the initials parameter (0s timeout, first element of the data)
$scope.whatToInclude='tpl1.html';
$scope.count=0;
$scope.nextSlide=function(timeOut){
$timeout(function(){
$scope.whatToInclude=$scope.data[$scope.count].template
$scope.count+=1
if($scope.count>=$scope.data.length)
$scope.count=0
$scope.nextSlide($scope.data[$scope.count].duration)
},timeOut);
};
$scope.nextSlide(0)
I think this can be a good start for a slideshow ;)
Have fun
I made a tutorial with a similar goal in mind:
https://www.youtube.com/watch?v=9COtsDovNpM
Basically store the views in an array of some sort and then based on a variable display that template. Angular will not load the template until ng-show='true' so they won't load all at once but as their clicked or cycled through.
Code example from my tutorial.
Replace ng-switch with whatever works for you.
The common premise is "show this template when that is equal to true".
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li ng-class="{active: main.active.tab == 'info'}">
<a ng-click='main.active.tab = "info"'>Settings</a>
</li>
<li ng-class="{active: main.active.tab == 'categories'}">
<a ng-click='main.active.tab = "categories"'>Categories</a>
</li>
<li ng-class="{active: main.active.tab == 'pages'}">
<a ng-click='main.active.tab = "pages"'>Pages</a>
</li>
<li ng-class="{active: main.active.tab == 'locations'}">
<a ng-click='main.active.tab = "locations"; main.locationgroup = {}'>Locations</a>
</li>
<li ng-class="{active: main.active.tab == 'experts'}">
<a ng-click='main.active.tab = "experts";'>Experts</a>
</li>
<li ng-class="{active: main.active.tab == 'resources'}">
<a ng-click='main.active.tab = "resources"'>Resources</a>
</li>
</ul>
<div class="tab-content">
<div ng-switch='main.active.tab'>
<div
ng-switch-when='info'
ng-include='"/apps/series/views/tabs/info.html"'></div>
<div
ng-switch-when='categories'
ng-include='"/apps/series/views/tabs/categories.html"'></div>
<div
ng-switch-when='pages'
ng-include='"/apps/series/views/tabs/pages.html"'></div>
<div
ng-switch-when='locations'
ng-include='"/apps/series/views/tabs/locations.html"'></div>
<div
ng-switch-when='experts'
ng-include='"/apps/series/views/tabs/experts.html"'></div>
<div
ng-switch-when='resources'
ng-include='"/apps/series/views/tabs/resources.html"'></div>
</div>
</div>
</div>