I am new to Snecha so please bear my non technical description.
MyView.js
itemTpl: [
'<div class="pb10 font-90">{associationDiplayText}</div>' +
'<div style="float:left">' +
'<div class="bold font-90"><b>{name}</b></div>' +
'<div class="font-90">{address1}</div>' +
'<div class="font-90">{address2}</div>' +
'</div>' +
'<div style="display:block;" class="fltR" id="displayIcon">' +
'<span id="phoneId" class="phoneIcon"></span>' +
'<span id="emailId" class="emailIcon"></span>' +
'<div class="clr"></div>' +
'</div>' +
'<div class="clr"></div>' +
'<div style="display:none" id="display" class="mt15 mb10">'+
'<tpl for="contacts">',
'<div style="float:left">' +
'<div class="font-50">{contactTypeText}:</div>' +
'<div class="font-50">{name}</div>' +
'</div>' +
'<div class="fltR" id="innerdisplay">' +
'<span id="contactphone" class="phoneIcon"></span>' +
'<span id="contactemail" class="emailIcon"></span>' +
'<input type="hidden" value="{#}" id="hiddenindex" />'+
'<div class="clr"></div>' +
'</div>'+
'<div class="clr"></div>' +
'</tpl>',
'</div>'+
'<div align="center">{moreDetail}</div>'
]
Controller.js In onItemTap I am doing following
onItemTapListView: function(view, itemIndex, target, record, event, eOptions) {
if(event.getTarget("#contactphone.phoneIcon")){
var contactRecord = record.data.contacts[itemIndex];
}
The problem is that when i click the first row it gives itemIndex = 0 which is what I expect but it also gives the same result when I click on phoneIcon from contact list which has around 10,15 items. what I need is to get the index on which contact item user has clicked.
Thanks in Anticipation
Each instance of the 1st-level record object will be set to a different row no mather what it contains.
ST wont ever know on which contact is the user tapping because the entire row is a single unit.
I know the UI would be different, but my recommendation is to go with a Nested List approach.
regards-
Related
I'm using angularJs. I would like to include a variable into a popover template.
angular.forEach($scope.myList, function (obj) {
obj.details = '<div uib-popover-html="' + template/template.html + '" type="button"' +
'popover-placement="bottom" name="' + obj.id+'" id="' + obj.id+'" ' +
'popover-trigger="\'click\'"> ' +
'<i class="glyphicon glyphicon-eur"></i></div>';
The template is quite simple:
<div>
<button ng-click="onClick(object.id)"></button>
</div>
What is my problem is I don't know how to link this object.id with the forEach. So, for me it is just a template with a param.
Is it possible to do?
I'm having an hard time trying to ask idea to keep my code style on certain conditions.
The use case is really simple : When declaring inline templates in angular, i'd like to keep the string concatenation indented "hmtl-like", aka :
return {
restrict : "E",
require : "?ngModel",
transclude : true,
replace : true,
template : '' +
'<div class="tl-checkbox">' +
'<div class="tl-checkbox-container">' +
'<div class="tl-checkbox-icon"></div>' +
'</div>' +
'<div class="tl-checkbox-label" ng-transclude></div>' +
'</div>'
}
But when applying code styles, this become flattened :
return {
restrict : "E",
require : "?ngModel",
transclude : true,
replace : true,
template : '' +
'<div class="tl-checkbox">' +
'<div class="tl-checkbox-container">' +
'<div class="tl-checkbox-icon"></div>' +
'</div>' +
'<div class="tl-checkbox-label" ng-transclude></div>' +
'</div>'
}
Which is just simply unreadable, unmaintainable and ugly.
The "workaround" I actually use is to insert empty spaces at the start of the lines :
return {
restrict : "E",
require : "?ngModel",
transclude : true,
replace : true,
template : '' +
'<div class="tl-checkbox">' +
' <div class="tl-checkbox-container">' +
' <div class="tl-checkbox-icon"></div>' +
' </div>' +
' <div class="tl-checkbox-label" ng-transclude></div>' +
'</div>'
}
But this insert empty text node in the template, and this is basically less pretty than without spacing.
My question is : is there a way to make idea understand that I want my custom indentation preserved for string concatenation while keeping the code style / fix indent for the rest of the file ?
Edit : before this is answered : no, using templateUrl instead of inline templating is not an acceptable answer, they behave slightly differently in complex layouts (sync linking for template vs async linking for templateUrl )
I'm using Angular Treeview to build a hierarchy in my website. I've added a Bootstrap Dropdown to each node in the hierarchy, it is displayed when the user clicks on the node label.
The menu items displayed in the dropdown is different depending on the type of the node. All this I've gotten to work.
Now when the user wants to add a node a bootstrap modal is supposed to open for user input. This is where I'm stuck, the modal does not get called at all. I've gotten functions within the directive working using $(".dropdown > ul.dropdown-menu").html($compile(appendThis)(scope));, but if I want to open a model defined in the directive template it does not work.
I've tried the solutions here and here, but they are not working.
Here is a simplified version of the directive template:
template =
'<div class="modal hide fade" id="addThisNode"">'+
'<div class="modal-body">'+
'<p>This Node Body</p>'+
'</div>'+
'</div>'+
'<div class="modal hide fade" id="addOtherNode"">'+
'<div class="modal-body">'+
'<p>Other Node Body</p>'+
'</div>'+
'</div>'+
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="normal" '+
'data-ng-hide="node.' + nodeChildren + '.length">'+
'</i> ' +
// Call this funcion when
// the node label is clicked
'<span class="treenode {{node.' + nodeType + '}}" '+
'id="{{node.' + nodeId + '}}"'+
'data-ng-class="node.selected" '+
'data-ng-click="' + treeId +
'.selectNodeLabel(node)">'+
'{{node.' + nodeLabel + '}}'+
'</span>' +
// bootstap dropdown menu
'<div class="dropdown" data-ng-show="node.selected">'+
'<a data-toggle="dropdown"><span class="caret"></span></a>'+
'<ul class="dropdown-menu">'+
// list items get appended here
'</ul>'+
'</div>'+
'</li>' +
'</ul>';
If the user clicks the node label this function is called:
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ) {
// set currentNode
scope[treeId].currentNode = selectedNode;
// Get the node type
var nodetype = scope[treeId].currentNode.NodeType;
var appendThis = '';
if (nodetype == 'This'){
appendThis = '<li><a data-target="#addThisNode" href="" data-toggle="modal">Add This Node</a></li>';
}
else if (nodetype == 'Other'){
appendThis = '<li><a data-target="#addOtherNode" href="" data-toggle="modal">Add Other Node</a></li>';
}
$(".dropdown > ul.dropdown-menu").html($compile(appendThis)(scope));
};
Sorry if this is confusing, it's confusing to me as well. But if you have tips on calling modals from inside a directive anything will be appreciated.
After searching through a lot of posts I was able to find an answer. I'm posting it here in case it can help anyone else.
I changed the structure of the template a bit, but the functionality stays the same. The actual problem was in compiling the template. It worked when I compiled it like this:
$(".dropdown > ul.dropdown-menu").html(appendThis);
$compile($(".dropdown > ul.dropdown-menu").contents())(scope);
I wanna rewrite some html into a directive but I'm in the dark when it comes to directives that use a dynamic template. Basically what I need to do is being able to pass parameters to the template so that I can re-use it with different values.
Now I've just passed parameters to the directive function but I know this is wrong. When you create directives that uses restrict: 'A' you can pass parameters like so:
<div error="somevalue"></div>
Which would then be available in the attrs. But how does it work when it uses restrict: 'E'?
How can I achieve what I want here?
forumApp.directive('error', [function(row, isRowAvailable, isRowUnchanged) {
return {
restrict: 'E',
template: '<div ng-if="row.model === "' + row + '">
<span class="error">*</span>
<div class="error-cell-inner" ng-if="row.model === 'row' && user[' + row + '].length > 0">
<span ng-if="' + isRowUnchanged + '"></span>
<span ng-if="' + isRowAvailable + ' && !' + isRowUnchanged + '" class="available">The name is available</span>
<span ng-if="!' + isRowAvailable + ' && !' + isRowUnchanged + '" class="error weight-override">The name is already taken</span>
</div>
</div>'
}
}]);
This helps in understanding how custom directives work in a easy way.
http://www.ng-newsletter.com/posts/directives.html
Try something on these lines.
Here I am using AE which means I am allowing this directive to be used as Attribute or element. But you can restrict it to just E too.
<rb-add-button text="Add New Parcel" ng-disabled="!storeNumber" ng-click="addParcel()"></rb-add-button>
appRedB.directive('rbAddButton', function () {
return {
restrict: 'AE',
replace: true,
scope: {
text: '#'
},
template: '<button class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> {{ text || "Add"}}</button>'
};
});
I want to add images in front of the text in an ExtJS combobox. I have the following code in listConfig...
listConfig: {
getInnerTpl: function(displayField) {
var tpl = '<div>' +'my img path is here' + '{name}</div>';
return tpl;
}
},
And my store is like this
Ext.define('state', {
extend: 'Ext.data.Model',
fields: [{ name: 'stateCode', type: 'int' }, { name: 'name', type: "string"}]
});
My JSON response from the server...
[{"stateCode":"0","name":"--Select--"},{"stateCode":"1","name":"ABC"},{"stateCode":"2","name":"XYZ"},{"stateCode":"3","name":"OPQ"},{"stateCode":"188587","name":"LMN"}]
Here i get the image infront of all items in combobox, but I only want the image infront of items with stateCode 1.
Please help
listConfig: {
getInnerTpl: function(displayField) {
var tpl = new XTemplate(
'<div>',
'<tpl if="stateCode > 0">',
'<img src='img/path/image.jpg' />',
'</tpl>',
'</div>'
);
return tpl;
}
}
I know this is old, but since I've encountered similar problem just recently, I'm gonna post my solution, maybe it will be some help to others.
In this case, you can do something like this:
listConfig: {
getInnerTpl: function(displayField) {
var tpl = '<div>' +'{[values.stateCode == 0 ? "<img src=\'path/to/image.jpg\'" : ""]}' + '{name}</div>';
return tpl;
}
},
var tpl = '<div><img src='img/path/image.jpg' class="state-{state}" />{name}</div>';
then uses css clasess to do something with your image (like hide or show)
I'm using ExtJS 5 and this is working for me:
listConfig: {
itemTpl: [
'<tpl if="stateCode = 0"', // If you have to use '<' or '>' you have to encode it (>)
'<img src="path/to/img.png" /> {name}',
'<tpl else>',
'{name}',
'</tpl>'
]
}
None of the answers so far were working for me, except #riza, but that doesn't provide enough logic for what I needed to do with multiple else if statements. It turns out that others were using "," instead of "+" (except #riza) to concatenate the strings of the tpl. Also, #MMZurita makes a good point with the encoding special characters in HTML. So > becomes > and < becomes <. The <div> and </div> need to go at the beginning and end of the actual tpl tag!
listConfig: {
getInnerTpl: function() {
var tpl =
'<div>' +
'<tpl if="id == 1">' +
'<img src="resources/icons/one.png" align="left"> {name}' +
'<tpl elseif="id == 2">' +
'<img src="resources/icons/two.png" align="left"> {name}' +
'<tpl elseif="id > 2">' +
'<img src="resources/icons/Custom.png" align="left"> {name}' +
'<tpl else>' +
'<img src="resources/icons/Standard.png" align="left"> {name}' +
'</tpl>' +
'</div>';
//);
return tpl;
}
}