I am trying to create an multi-select directive for Angular, similar to a 'select' but where multiple options can be chosen.
The basic structure works, but I want/need to be able to specify an optional template used for the display of the strings. For example, a user can choose from a list of options, but the text displayed is passed through a translate filter.
I cannot work out how to get the template to work, I've messed about with compile rather than link, but didn't get anywhere, and I suspect using $compile may help, but I'm new to Angular and having some trouble there too.
Here is the current progress in Plnkr
I want to change the {{item}} lines in the template to contain the string specified in the display-template attribute e.g. {{item | simpleFilter}} but it does not get evaluated.
Any help would be greatly appreciated.
Simon
You can not use displayTemplate: '=' on your view, because you are going to evaluate this value in directive template, I'd suggest you to don't pass it in isolated scope. Do write your expression which needs to be evaluated inside attribute & create template using attrs.displayTemplate
Markup
<multi-select ng-model="output" source="input" display-template="item | simpleFilter">
</multi-select>
Directive
return {
restrict: 'E',
template:function(element, attrs){
return ' <div dropdown class="form-control" tabindex="0"' +
' style="position:relative; padding: 0; min-height:66px; max-height:66px;">' +
' <div class="input-group-addon pull-right btn btn-default" type="button" dropdown-toggle style="width:33px; height:100%; border-top-width: 0; border-bottom-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;">' +
' <span class="caret"></span>' +
' </div>' +
' <div style="min-height:66px; max-height:66px; overflow-y: auto;">' +
' <div style="display: inline-block; padding: 2px; margin: 2px; border-width:1px; border-style:solid;"' +
' data-ng-repeat="item in ngModel">' +
' <span>{{item}}</span>' +
' <button type="button" class="close"' +
' ng-click="removeItem(item)"' +
' style="padding-left: 2px; padding-right: 2px;">' +
' ×' +
' </button>' +
' </div>' +
' </div>' +
' <ul class="dropdown-menu" style="top:initial; left:initial; width:100%; position:absolute; margin: 0;">' +
' <li ng-repeat="item in source">' +
' <a ng-click="addItem(item)">{{'+ attrs.displayTemplate +'}}</a>' +
' </li>' +
' </ul>' +
' </div>'},
scope: {
source: '=',
ngModel: '='
},
require: 'ngModel',
replace: true,
link: function(scope, element, attrs) {
scope.addItem = function(item) {
if (scope.ngModel === undefined) {
scope.ngModel = [];
}
if (scope.ngModel.indexOf(item) === -1) {
scope.ngModel.push(item);
}
};
scope.removeItem = function(item) {
var index = scope.ngModel.indexOf(item);
scope.ngModel.splice(index, 1);
if (scope.ngModel.length === 0) {
scope.ngModel = undefined;
}
};
}
};
Working Plunkr
Related
I want to edit and save content in selected directive.The directive is populated by ng-repeat. On button click visible items should change to input field and again on click it should reverse
Directive is
.directive('component', function() {
var link = function(scope, element, attrs) {
var render = function() {
var t = scope.layouts[scope.type][attrs.indexs];
var icon = scope.layouts[scope.type][attrs.indexs];
var v = attrs.value;
if(scope.type=="edit"){
element.html('<input type="' + t + '" ng-model="vm.name" value="'+v+'">');
if(attrs.indexs==1){
element.html('<' + t + '>Save');
}}
if(scope.type=="display"){
element.html('<' + t + ' ng-model="'+v+'" >'+v+'</'+t+'>');
if(attrs.indexs==1){
element.html('<' + t + ' >Edit');
}}};
scope.$watch('type', function(newValue, oldValue) {
render();
});
};
return {
restrict : 'E',
link : link
}
});
plunker Link
Problem is on click all directive is changed to editable and vice-versa.
How can I make it work on selected set of directive
Try something like the following. It's much simpler to use a template with a directive than trying to modify the html directly.
Directive
angular.module('myApp', [])
.controller('MyController', MyController)
.directive('component', function(){
return {
template: [
'<div>',
'<span style="font-weight:bold" ng-show="!editing">{{ value }} <button ng-click="editing = true">Edit</button></span>',
'<span ng-show="editing"><input type="input" ng-model="value"><button ng-click="editing = false">Save</button></span>',
'</div>'
].join(''),
restrict: 'E',
scope: {
value: '=value'
},
link: function($scope){
$scope.editing = false;
}
}
});
HTML
<div class="col-sm-12" ng-repeat="s in vm.allCat track by $index">
<div class="col-sm-1 text-muted">Name</div>
<div class="col-sm-9 text-left">
<component value="s.name"></component>
</div>
</div>
</div>
I've forked your plunker here.
What i want to do is when i click for example on some button with binded function like this, it will create whole DOM element structure for private chat window purpose
$scope.openPrivateChatWindow = function () {
//here i want to do some coding to create whole div structure
}
With jQuery i will do something like this
function openPrivateChatWindow() {
var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
<div class="header">' +
'<div style="float:right;">' +
'<img id="imgDelete" style="cursor:pointer;" src="/Images/delete.png"/>' +
'</div>' +
'<span class="selText" rel="0">' + userName + '</span>' +
'<span class="selText" id="msgTypeingName" rel="0"></span>' +
'</div>' +
'<div id="divMessage" class="messageArea">' +
'</div>' +
'<div class="buttonBar">' +
'<input id="txtPrivateMessage" class="msgText" type="text" />' +
'<input id="btnSendMessage" class="submitButton button" type="button" value="Send" />' +
'</div>' +
'<div id="scrollLength"></div>' +
'</div>';
}
is there something how i can archieve this using angular and if it is, what is the best way how to do that, for example if i can load some html template for that or do it like i showed right up here with jQuery
You should not add html nodes to the DOM from the within the controller.
Either use a custom directive or just hide your div using ng-if and make it appear on button click.
$scope.isChatHidden = true;
$scope.openPrivateChatWindow = function () {
$scope.isChatHidden = false;
}
<div ng:if="isChatHidden">
Other DOM Elements
</div>
I'm new to angularjs and i'm getting some troubles. Usually I find a way to fix it but not this time.
So the problem is I want to use an md-button as a link to another page. But, when I add an href, the button disappears from the page.
Here is my code:
home.html
<body ng-app="friend-s-app">
<div ng-controller="friendsappController">
<md-toolbar>
<div class="md-toolbar-tools">
<md-button href="/home.html" >
Home
</md-button>
</div>
</md-toolbar>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="app.js"></script>
app.js in case you want it :
(function(angular, undefined){
"use strict";
angular
.module('friend-s-app', ['ngMaterial', 'ngMessages', 'ng'])
.controller('friendsappController', inscriptionEditor)
.controller('InscriptionSheet', InscriptionSheet);
function inscriptionEditor($scope, $mdDialog) {
var alert;
$scope.myPathVariable = 'path/to/somewhere';
$scope.showInscription = showInscriptionSheet;
$scope.showSignIn = showSignIn;
function showInscriptionSheet($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog layout="column">' +
'<md-content>' +
'<form style="padding: 20px;">' +
'<div layout="row">' +
'<md-input-container>' +
'<label>First name</label>' +
'<input ng-model="user.firstName" required/>' +
'<div ng-messages="userForm.firstName.$error" ng-show="userForm.firstName.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Last name</label>' +
'<input ng-model="user.lastName" required/>' +
'<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container>'+
'</div>'+
'<md-input-container style="width: 50%">' +
'<label>Nickname</label>' +
'<input ng-model="user.nickname" required minlength="5" maxlength="15"/>' +
'</md-input-container>' +
'<div layout="row">' +
'<md-input-container>' +
'<label>Password</label>' +
'<input ng-model="user.password" type="password" required minlength="5" maxlength="15"/>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Repeat password</label>' +
'<input ng-model="user.repassword" type="password" required minlength="5" maxlength="15"/>' +
'</md-input-container>'+
'</div>'+
'<md-input-container>' +
'<label>E-mail</label>' +
'<input ng-model="user.email" required/>' +
'</md-input-container>'+
'<div layout="row">'+
'<md-button ng-Click="closeDialog()" style="width:50%">' +
'Cancel' +
'</md-button>' +
'<md-button style="width: 50%">' +
'Validate' +
'</md-button>' +
'</div>'+
'</form>'+
'</md-content>'+
'</md-dialog>',
controller: 'InscriptionSheet',
onComplete: afterShowAnimation,
locals: { employee: $scope.userName }
});
function afterShowAnimation(scope, element, options) {
}
}
function showSignIn($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog>' +
'<md-content>' +
'<md-input-container>' +
'<label>Nickname</label>' +
'<input ng-model="user.nickName" required/>' +
'<div ng-messages="userForm.nickName.$error" ng-show="userForm.nickName.$dirty">' +
'<div ng-message="required">This is required!</div>' +
'</div>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Password</label>' +
'<input ng-model="user.password" required type="password"/>' +
'<div ng-messages="userForm.password.$error" ng-show="userForm.password.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container> ' +
'<div layout="row">'+
"<md-button ng-Click=\"closeDialog()\" style=\"width: 50%\" >" +
'Cancel' +
'</md-button>' +
'<md-button style="width: 50%" href="home.html">' +
'Validate' +
'</md-button>' +
'</div>'+
'</md-content>' +
'</md-dialog>',
controller: 'InscriptionSheet',
onComplete: afterShowAnimation,
locals: { employee: $scope.userName }
});
function afterShowAnimation(scope, element, options) {
}
}
}
function InscriptionSheet($scope, $mdDialog, employee) {
$scope.employee = employee;
$scope.closeDialog = function() {
$mdDialog.hide();
};
}
})(angular);
And there are the results :
Without the href :
http://i.stack.imgur.com/zKRKS.png
With it :
http://i.stack.imgur.com/M4JqC.png
thanks for helping me.
I just experienced a similar issue. Note when you switch from an ng-click to an ng-href it will inject an anchor tag instead of a button. To maintain the same visual characteristics I needed to apply an display: inline-block; to the .md-button class (which gets added to the aforementioned anchor tag) in my CSS. This may be the cause of it disappearing on your side.
Let me know if that makes sense or requires any further elaboration.
For using the filtering of ng-grid, I mean column wise ng-grid I looked at this plunker as an example which works fine - http://plnkr.co/edit/c8mHmAXattallFRzXSaG?p=preview. However when I try to make my own example of column filtering and I use the var as per ng-grid documentation
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
'<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
'<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
'<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
'<div class="ngSortPriority">{{col.sortPriority}}</div>'+
'</div>'+
'<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
I keep getting a syntax error at the colt. Can someone please let me know what's going on here?
Your template string include '
'<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
you need use \, like this
'<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
Edit:
If need filter box, you miss this
<input type="text" ng-click="stopClickProp($event)" placeholder="Filter..." ng-model="col.filterText" ng-style="{ \'width\' : col.width - 14 + \'px\' }" style="position: absolute; top: 30px; bottom: 30px; left: 0; bottom:0;"/>
This is example
Plunker
Edit:
The original plunkr is design filtering from the beginning characters. If you went to filtering from the substring, you can try * begin filter textbox.
If you don't like it, you can modify filterBarPlugin function :
var filterText = (col.filterText.indexOf('*') == 0 ? col.filterText.replace('*', '') : "^" + col.filterText) + ";";
searchQuery += col.displayName + ": " + filterText;
To
searchQuery += col.displayName + ": " + col.filterText;
Example
I'm using AngularJS and i'm writing my own directive. I want to use conditional logic in my custom directive. The problem is caused in the template part. Here's a piece of my code:
angular.module('myDirectives').directive('widget', function() {
return {
replace: true,
restrict: 'E',
template:
'<div class="widget">' +
'<div class="panel panel-default">' +
'<div class="panel-heading">' +
'<a href="" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">' +
'<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>' +
'</a>' +
'</div>' +
'<div class="panel-body" collapse="isCollapsed">' +
'<p>Panel Content</p>' +
'</div>' +
'</div>' +
'</div>',
transclude: true
}
});
This line throws an error.
'<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>'
The '' around fa-angle-up and fa-angle-down are causing this.
There's probably a very simple workaround, but I haven't figured it out yet. So my question for you guys; Is there any other way to write this line?
You have to escape the apostrophes
'<i class="fa" ng-class=" { \'fa-angle-up\': !isCollapsed, \'fa-angle-down\': isCollapsed } "></i>'