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
Related
I am new to Angular, i am using Angular5.
I have productlist.js, having data in that file. Binded that data in the my html page, it's not working.
If i have the data in html file [ commented code in sample.html ], then it is working as expected.
productlist.js
angular.module('myShoppingList')
.controller('myCtrl', function ($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
Sample.html
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
I have added the productlist.js under the head in sample.html
You have few mistakes, you need to add empty dependencies to your module as follows,
angular.module('myShoppingList',[])
DEMO
angular.module('myShoppingList',[])
.controller('myCtrl', function ($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
When you add into html file, the following order of statement is important as well.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="yourSampleScript.js"> </script>
Please take into consideration the abovementioned code snippet.
I need to add dynamic template on click for that i have used :
var action_template='';
app.controller('EventCtrl',function($rootScope){
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png"></a></li></ul>';
$rootScope.template=action_template;
});
In html:i have used ngSanitize
<ul>
<li ng-bind-html="template"></li>
</ul>
template is appending perfectly but there is no href link.
what I am doing wrong ? Or is there any solution for doing the same thing ?
The main problem was unable to add any angular directives such as ng-click, ng-href, ui-sref etc.
But after adding $sce.trustAsHtml it is adding ui-sref but not adding any hyperlink.
Hint will be appreciable.
Thanks
I think you forgot trustAsHtml in your controller(you can see in the snippet after running, that ui-sref is present in the source):-
var app = angular.module("myApp", []);
var action_template='';
app.controller("myCtrl", function($scope,$rootScope,$sce) {
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate">Link</a></li></ul>';
$rootScope.template=$sce.trustAsHtml(action_template);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
You need trust your HTML, using $sce, Try below code
var jimApp = angular.module("mainApp", []);
jimApp.controller('EventCtrl',function($rootScope, $sce, $scope){
var action_template='';
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png" alt="Default image">Link</a></li></ul>';
$scope.template=$sce.trustAsHtml(action_template);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="EventCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
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" >
The following code works.
<body ng-app="" ng-init="names=['a','b']">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>
but as soon I add a value to ng-app (say ng-app="myApp"), it stops working. Anyone would know why?
Because, you told angular by specifying name, that in this page all objects definitions and details which I am going to use is defined in a module called my app. Angular Search for it and does not find.
when you specify the ng-app you should specify the app definition, controller you can initialize these values from ng-init.
<html>
<body>
<div ng-app="myapp" controller="MyController">
<span>{{personname}}</span>
</div>
<script>
// this will setup the myapp
var app = angular.module('myapp', []);
app.controller('MyController',function(){
$scope.personname='tammi';
});
</script>
</body>
</html>
You will need to create a separate "app.js" (don't forget to reference it inside script tags in the html(view)) file and create an angular module and assign it to the global variable "myApp":
var myApp = angular.module("myApp", []);
Then create a controller that will expose the data to the view via the $scope service:
myApp.controller("MyCtrl", function($scope){
$scope.names = ['a', 'b'];
}
In the view, do the following:
<body ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>
Having trouble getting a simple sortable demo for angular-ui going here- http://jsfiddle.net/B3YDr/:
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
angular.module('myApp', ['ui']);
var myCtrl = function($scope) {
$scope.items = ['One','Two','Three'];
};
Included jQuery & jQueryUI
Included AngularJS
Included AngularUI
Added 'ui' module as a dependency
I've copied the sample code almost like-for-like here http://angular-ui.github.io/#directives-sortable but still can't reorder list items.
Can anyone point out what is wrong? Thanks
You need to control the import order of scripts:
http://jsfiddle.net/B3YDr/4/
Put jquery before angular for angular to use it as element service.
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.2.0/ui-bootstrap-tpls.js"></script>
you can use methods in sortableOptions like below code
$scope.sortableOptions = {
handle: '.custom-ctrl-handle',
stop: function(e, ui) {
// console.log("stop function worked");
}
};