I want to use kendo-ui controls with angular.
How can I use angular syntax in kendo templates?
Here is an example of two kendo ui list views, one with kendo ui template (works fine) and the second with angular template and it doesn't work.
Additional explanation:
In the example I have two kendo lists.
The first one is using the following template (kendo syntax):
<script type="text/x-kendo-tmpl" id="template">
<div class="product-view k-widget">
<div class="edit-buttons">
<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
</div>
<label>Product Name</label>
<div class="listItem"><h3>#:ProductName#</h3></div>
</div>
the second list is using a template with angular syntax:
<script type="text/x-kendo-tmpl" id="angularTemplate">
<div class="product-view k-widget">
<div class="edit-buttons">
<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
</div>
<label>Product Name</label>
<div class="listItem"><h3>{{ProductName}}</h3></div>
</div>
The second one is not working. Either it is not supported or I'm doing something wrong.
The latest build compiles templates with angular.
https://github.com/kendo-labs/angular-kendo/issues/182
Related
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
I was looking for a angular/bootstrap non javascript solution to have a collapsible bootstrap column..
Here's what I came up with when I couldn't find another solution online.
It was important to me to not use jquery (don't want to clutter up my controller with UI stuff)
It's not rocket science, but I spent a while looking for a bootstrap solution and came up dry.
<button ng-click="showAddDiv = !showAddDiv">Show</button>
<div class="container-fluid">
<div class="row">
<div class="material-color-primary-1 col-xs-12" ng-class="{true:'col-lg-8', false:'col-lg-12'}[showAddDiv]" ng-init="showAddDiv = false">
</div>
<div class="material-color-secondary-1" ng-class="{true:'col-xs-12 col-lg-4', false:'hidden'}[showAddDiv]">
'add div'
</div>
</div>
</div>
I'm new to angular and was wondering how to tackle the following situation. I'm using angular with jquery mobile and am creating a one page app. When the app loads, I have it create pages or divs inside the body tag. I have two types of pages, "typical pages" and "video pages" but I want to use one object to create both page types. I want to use one object because I also use that object to create my menu and I don't want to have to edit multiple objects.
My issue is, I want to create a "typical page" for each element in the object but I only want to create a "video page" for each object that doesn't have "videoPage: false". I tried using ng-if on the "video page" ng-repeater (see html below) but it doesn't seem to be working. Can I use the ng-if on a ng-repeater?
I have the following data/object:
function App($scope){
$scope.pages = [
{
id: "intro",
title: "Intro",
videoPage: false
},{
id: "activeStretches",
title: "Active Stretches by Area"
},{
id: "passiveStretches",
title: "Passive Stretches by Area"
}
];
}
And the html:
<body ng-app ng-controller="App">
<div data-role="page" id="{{page.id}}" ng-repeat="page in pages">
<div data-role="header" data-theme="h">
<a data-rel="back" data-icon="arrow-l">Back</a>
<h1>{{page.title}}</h1>
</div>
<div data-role="content">
<div class="content-side">
<ul data-role="listview" data-inset="true">
<li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
{{menu.title}}
</li>
</ul>
<div class="logo"></div>
</div>
<div class="content-main">
Typical Page
</div>
</div>
</div>
<div data-role="page" id="{{page.id}}Video" ng-repeat="page in pages" ng-if="page.videoPage">
<div data-role="header" data-theme="h">
<a data-rel="back" data-icon="arrow-l">Back</a>
<h1 class="vidTitle"></h1>
</div>
<div data-role="content">
<div class="content-side">
<ul data-role="listview" data-inset="true">
<li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
{{menu.title}}
</li>
</ul>
<div class="logo"></div>
</div>
<div class="content-main">
Video Page
</div>
</div>
</div>
</body>
ng-if is new as of 1.1.15 so make sure you're using a new (currently unstable) version of Angular.
And, yes, you can mix ng-if with ng-repeat. Here's a fiddle showing it in action (using 1.2): http://jsfiddle.net/rbQry/1/
Note this line (switch the ng-if to "true" and the repeat comes back):
<li ng-repeat="phone in phones | filter:query" ng-if="false">
I have a page where I have included the (Twitter) bootstrap.
On this page I have a prefectly working accordion and within that accordion I have a collapsable div. See the code below:
<div class="accordion" id="checkListAccordion">
<div ng-repeat="item in items" class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#checkListAccordion" href="#collapse{{item.$$hashKey}}">{{item.name}}</a>
</div>
<div id="collapse{{item.$$hashKey}}" class="accordion-body collapse">
<div class="accordion-inner">
<div class="container-fluid">
<div class="row-fluid">
<div class="badges span12">
<span class="badge badge-info" data-toggle="collapse" data-target=".info{{item.$$hashKey}}"><i class="icon-info-sign icon-white"></i></span>
<div class="info{{item.$$hashKey}} collapse in">
{{item.info}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
some text
</div>
</div>
</div>
</div>
</div>
</div>
Now, when I click the info badge, the div with the corresponding class is folding open. But it never folds back when I click it again. Only when I wrap in in a navbar and navbar-inner, it folds back....but of course, I don't want that.
Any help on this?
When i add a controler to your code all seems to work as expected:
angular.module('plunker',[]);
function AccordionDemoCtrl($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
name: "Dynamic Group Header - 1",
info: "Dynamic Group Body - 1"
},
{
name: "Dynamic Group Header - 2",
info: "Dynamic Group Body - 2"
}
];
}
See also: http://plnkr.co/nX4kvMThA0bYwcbXZS7t May be there will be a problem with the versions you use? I used jQuery 1.9.1, Twitter Bootstrap 2.3.1 and angularJS 1.0.7 (see: Angular JS Bootstrap Accordian Example).
btw have you consider to use UI Bootstrap (http://angular-ui.github.io/bootstrap/) see: http://plnkr.co/u7l6nrkPZM8ZJtA08RNP (thanks to winkerVSbecks who answered Howto set template variables in Angular UI Bootstrap? (accordion))
I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?
<div ng-switch on="user">
<div ng-switch-when="true">
<span>One</span>
</div>
<div ng-switch-when="false">
<span>Two</span>
</div>
</div>
You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:
<ng-switch on="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</ng-switch>
Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3
the solution provided by #ChrisAuer this still creates a wrapping element.
AFAIK you'd have to use a custome directive. You may want to use angular-ui if
<div ui-if="user">
<span>One</span>
</div>
<div ui-if="!user">
<span>Two</span>
</div>
Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.
<div ng-show="user"> <!-- same as ng-hide="!user" -->
<span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
<span>Two</span>
</div>
I would say use ng-if, like this:
<div>
<div ng-if="user==true">
<span>One</span>
</div>
<div ng-if="user==false">
<span>Two</span>
</div>
</div>
you can use <span> to prevent your html layout changing
because <span> is not like <div>, it won't take up any space.
<span ng-switch="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</span>