Can someone advice how to do accordion that toggles with animation and if I click on 1st div, only the 1st panel will show?
http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview
<body ng-controller="Ctrl">
<div ng-repeat="item in items">
<div class="accordion" ng-click="show=show==true? false:true;">
{{item.id}}
</div>
<div class="repeated-item" ng-model="accordionContent" ng-show="show">
{{item.name}}
</div>
</div>
</body>
You don't need controller for this purpose, it can be handled directly using directives
Plunker Demo
Instead of re-inventing the wheel, use ui bootstrap's accordion directive. It comes with a lot of options for customization.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.isFirstOpen = true;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<div ng-app="ui.bootstrap.demo" ng-controller="AccordionDemoCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="isFirstOpen">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="Another Static Header">
This content is straight in the template.
</uib-accordion-group>
</uib-accordion>
</div>
official plunker demo
Here is a solution for your problem in gennerally when you working with ng-repeat you could manipualte in your fucntions $index value of your arrray
[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview`][1]
//JS
$scope.toggle = function($index) {
$scope.index = $index;
};
//AND IN HTML SIMPLE TOGGLE CLASS
<div class="repeated-item" data-ng-class="{'open-accordion' : index === $index}" ng-model="accordionContent" >
Related
I'm trying to create an autocomplete feature but I can't display the results as I want, I think it's a z-index issue, but I couldn't solve it.
I can use md-autocomplete, it doesn't have this problem, but I want to learn what's causing this.
As soon as I start typing, my input goes up and results are displayed below in the navigation bar.
I changed $http to an array to mock the results.
Here's my code:
<html lang="en">
<head>
<style>
#testing > div > div > div > md-input-container {
margin:0;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<md-content>
<md-toolbar id="testing">
<div layout-wrap layout="row">
<div ng-controller="SearchCtrl" class="md-toolbar-tools">
<div flex="40" layout-align="center">
<md-input-container class="" flex="" layout="row">
<label class="search-color">Search</label>
<input ng-model="searchInput" class="text1" type="text">
</md-input-container>
<md-item-template flex="100" layout="column">
<div ng-repeat="a in details">
<div>{{a}}</div>
</div>
</md-item-template>
</div>
</div>
</div>
</md-toolbar>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
angular.module('BlankApp').controller('SearchCtrl', ["$scope", "$http",
function($scope, $http) {
//$scope.searchInput = "";
$scope.$watch('searchInput', function() {
if ($scope.searchInput) {
fetch();
}
});
function fetch() {
var arr = ["result1", "result2", "result3", "result4"];
$scope.details = arr;
}
}]);
</script>
</body>
</html>
Here's my plunk : http://plnkr.co/edit/LQ1HxV6vmPkUGYHnVfCg?p=preview
I have a ng-repeat that is displaying a list of items. I want them to be a col width of 2
This is the index.html body
index.html
<!DOCTYPE html>
<html ng-app="games">
<head>
<title>Games</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/fontello.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<meta name=viewport content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app/app.js"></script>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body ng-controller="gamesCtrl">
<a ui-sref="games">Games</a>
<div class="container">
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
</html>
And here is the HTML I am pulling for the ui-view
list.html
<div ng-repeat="game in games">
<div ng-class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
What's happening though is its just stacking everything on top of each another and not putting it next to each other.
Here is the inspect element code
<div class="row">
<!-- uiView: -->
<div ui-view="" class="ng-scope">
<!-- ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40071/100/40071.png">
</div>
<!-- end ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope: Time Travel</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40072/100/40072.png">
</div>
</div>
Just incase something else is wrong here is the js
angular.module('games', ['ui.router', 'ui.bootstrap'])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
//take out #
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
// Now set up the states
$stateProvider
.state('games', {
url: "/",
templateUrl: "/static/app/list.html",
controller: 'gamesCtrl'
})
})
.controller('gamesCtrl', ['$scope', '$state', 'gamesFactory',
function($scope, $state, gamesFactory) {
$scope.$state = $state;
$scope.games = null;
function init() {
gamesFactory.getGames().success(function(games) {
$scope.games = games.data;
console.log($scope.games.data)
});
}
init();
}
])
.factory('gamesFactory', function($http) {
var factory = {};
factory.getGames = function() {
return $http.get('/games.json');
};
return factory;
});
ng-class is expecting an Angular expression. In this case, you are giving it the actual CSS class name. Angular tries to evaluate that as an expression, which results in undefined (or null or the empty string).
Since you don't need to do anything but apply the class name here, just use the regular class attribute instead of ng-class:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
ng-class expects an expression. Change your markup like this:
<div ng-repeat="game in games">
<div ng-class="'col-xs-2'">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngClass
The problem is that you're repeating the div around the columns, not the columns themselves. Try this:
<div class="col-xs-2" ng-repeat="game in games">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
Try using ng-src on your image. At the time the page is first rendered, the image size probably can't be determined.
Edit, so the complete html should be:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src= "" ng-src="{{game.thumbnailUrl100}}"/>
</div>
As others have pointed out, you shouldn't be using ng-class here.
I want to show and hide a div with ng-show directive.
Here is my HTML file:
<body ng-app="my-app">
<div ng-controller="MainController">
<ul ng-show="isVisible" id="context-menu">
<li> Menu item 1 </li>
<li> Menu item 2 </li>
</ul>
</div>
</body>
Here is my CoffeeScript file:
myApp = angular.module("myApp", [])
myApp.controller "MainController", ["$scope", ($scope) ->
$scope.isVisible = false
]
Here is the codepen for it.
What is the problem? Can you help?
The issue with your code is :
<body ng-app="my-app">
It should be:
<body ng-app="myApp">
Don't confuse how you define attributes with their values.
http://codepen.io/anon/pen/AHxEw
I have a simple app in which i have a single input element with a mylist model.
If mylist=1 i ng-include first.html and if mylist=2 i ng-include second.html. So far so good.
My problem is that in each html template i have a button that when clicked i want to change the value of mylist so i can navigate to the other and in order to achieve this i do:
<button ng-click="mylist=x" >switch to x</button>
but ng-click doesn't work. Why?
Here is my code:
scripts.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function ($scope) {
$scope.mylist = 1;
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<input type="number" ng-model="mylist" />{{mylist}}
<br/>
<div ng-switch on="mylist">
<div ng-switch-when=1>
<ng-include src="'first.html'"></ng-include>
</div>
<div ng-switch-when=2>
<ng-include src="'second.html'"></ng-include>
</div>
</div>
</body>
</html>
first.html
<p>first</p>
<button ng-click="mylist=2" >switch to 2</button>
second.html
<p>second</p>
<button ng-click="mylist=1">switch to 1</button>
Also here is the Plunker http://plnkr.co/edit/bVATLV66kN21LC8EPeoW
ng-include creates a child scope. So you should bind to an object property instead of a primitive.
$scope.my = {
list: 1
};
http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=preview
I generated a list with ng-repeat, where each item has a count variable. In the listitems I have a link, I want to increment the count when I click it.
I don't have a clue to solve this in Angular-JS way.
Plunker
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script>
function increment() {
}
</script>
</head>
<body>
<div ng-init="items = [
{name:'fruit', count:4},
{name:'car', count:1},
{name:'dog', count:2}
]">
<ul>
<li ng-repeat="item in items">
<span>Count:</span>
<span>{{item.count}}</span>
<a onclick="increment();">Increment</a>
</li>
</ul>
</div>
</body>
With JQuery I would assign the span a unique id, using some counter variable, pass this id to increment, find the html object and update. But I'm curious about an Angular way to do it.
You can use ng-click to manipulate the data model for each row like this:
function ctrl($scope) {
$scope.increment = function(item){
item.count += 1;
}
}
<a ng-click="increment(item);">Increment</a>
Make sure you put the controller to wrap it like this <body ng-controller="ctrl">
DEMO
<a ng-click="item.count = item.count + 1">Increment</a>
http://plnkr.co/edit/jh4UIt?p=preview
Simply replace onclick with ng-click="item.count = item.count+1" and give the a href attribute.
<a ng-click="item.count = item.count+1" href="">Click</a>
This is a solution
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
</head>
<body>
<div ng-init="items = [
{name:'fruit', count:4},
{name:'car', count:1},
{name:'dog', count:2}
]">
<ul>
<li ng-repeat="item in items">
<span>Count:</span>
<span>{{item.count}}</span>
<a ng-click="item.count = item.count + 1">Increment</a>
</li>
</ul>
</div>
</body>
</html>