I'm trying to build a table as in this JSFiddle which I found here.
I notice lots of elements have a collapse="<boolean>" property and as long as the property is true, you will get a nice collapse animation. I tried finding documentation about the collapse attribute online as well and didn't find anything. However, I also noticed the version of angular is rather outdated (1.0.5 instead of 1.5 that I'm currently using). If I try to replace the reference to angular 1.5, the jsfiddle example also stops working. My question is, assuming collapse is deprecated, how can I reproduce this effect in angular 1.5?
The collapse/uib-collapse directive belongs to the angular-ui-bootstrap library, the documentation can be found here:
https://angular-ui.github.io/bootstrap/#/collapse
There is nothing wrong with the directive when running under Angular 1.5.0:
angular.module('App', [
'ngAnimate',
'ui.bootstrap'
]);
angular.module('App').controller('Controller', [
'$scope',
function ($scope) {
$scope.isCollapsed = false;
}
]);
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>Angular 1.5.0</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script type="application/javascript" src="app.js"></script>
</head>
<body ng-controller="Controller">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">
Some content
</div>
</div>
</body>
</html>
Related
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
Certain chars and text after that gets rejected when using ng-bind-html along with $sce.trustAsHtml. Any Ideas on taclking this issue?
Controller
angular.module('myApp', []).controller('IndexController', ['$scope', '$sce', function($scope, $sce){
$scope.text= $sce.trustAsHtml('TEST>19 XYZ </= This is not showing up in ng-bind-html />');
}]);
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.8" src="http://code.angularjs.org/1.3.8/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="IndexController">
<input style="width:100%" type="text" ng-model="text">
<div ng-bind-html="text"></div>
</body>
</html>
plunker
http://plnkr.co/edit/kjtNXYzPCMS3Q3OirwYZ?p=preview
This is invalid html, the < and > should be encoded as html entities : > <
If you just put this html in a page, the display is the same (please run the very simple snippet below). The browser just doesn't know what to do with this tag.
TEST>19 XYZ </= This is not showing up in ng-bind-html />
I can't seem to get angular ui bootstraps collapse directive to work. I've set up a plunkr with a minimal example, but its still non functional. Anyone shed any light on this?
Plunkr
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="CollapseController">
<button class="btn btn-default" ng-click="collapsed = !collapsed">Toggle</button>
<div collapse="collapsed">
<div>
<h1>Hello Plunker!</h1>
</div>
</div>
</body>
</html>
JS
angular.module('app', [])
.controller('CollapseController', function($scope){
$scope.collapsed = false;
});
You need to declare ui.bootstrap module dependency in order to use it:
angular.module('app', ['ui.bootstrap'])
You should declare a dependency in your app module on ui.bootstrap module:
angular.module('app', ['ui.bootstrap']);
Here's your updated working plnkr.
I have the following in my plunker
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<accordion close-others="false">
<accordion-group heading="Company" ng-click="toggleOpen()">
<div class="row" data-ng-repeat="item in companyValues">
<div class="col-xs-6">
<input name="companyFilter" type="radio" value="{{item.value}}" id="{{item.name}}-filter-radio" ng-model="userData.companyFilter" ng-change="saveUserPreferences()" />
</div>
<div class="col-xs-6 pull-text-left">{{item.name}}</div>
</accordion-group>
</accordion>
</body>
</html>
However, when I try to run I get a 404 on template/accordion/accordion-group.html. Any ideas?
Your markup loads two different versions of ui.bootstrap.
A version with templates for components pre-loaded in Angular.js' $templateCache service.
A version with no pre-loaded templates for if you want to tweak control looks.
Since version #2 is loaded 2nd, it appears that all the pre-loaded templates are not available.
Solution: Delete the line:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
Example: http://plnkr.co/edit/JyNu2hggAFt33hTvfoXo?p=preview
When you use angular.ui you also have to include angular.ui.tpls in your dependencies like so:
var app = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls']);
I am attempting to implement the Kendo UI Editor with Angular, per the example on their demos website. So far it works pretty well;
kendo ui demos
This is what I have so far, but the problem I am having is actually rendering a fully parsed preview of the contents of the editor. When I use ng-bind-html, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use kendo.htmlEncode, but that isn't working either. I'm not quite getting the hang of this like I thought I would...
I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.
jsBin
app.js
(function(){
var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
app.controller('EditorController', function($scope, $sce){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});
app.directive('kendoHtml', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
}
};
});
})();
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/kendo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular.sanitize.js"></script>
<script type="text/javascript" src="js/kendo.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="kendoDemos">
<div ng-controller="EditorController" class="container">
<h2>Kendo Editor</h2>
<textarea kendo-editor ng-model="html"></textarea>
<h3>Kendo Editor Preview</h3>
<blockquote kendo-html="html"></blockquote>
</div>
</div>
</body>
</html>
You need to do two things:
Prevent the editor from encoding its value.
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
Avoid using kendo.htmlEncode because it will encode it one more time.
scope.$watch(attrs.kendoHtml, function() {
element.html(scope[attrs.kendoHtml]);
});
Here is the updated jsbin: http://jsbin.com/bibecima/1/edit
You can also use ng-bind-html to avoid the need of a custom directive: http://jsbin.com/kamenoju/1/edit. It will work as expected once you set the encoded option to false.