Here is how I am adding fields.
$scope.addEmailField = function () { //Function to add new email field.
if (valid <= 1 && checkToDelete == 0) {
var mailTxtId = 'mail' + valid;
var mailModel = 'Contact_Email' + valid;
var hide = 'hide' + valid;
hide = false;
console.log(mailTxtId);
var emailDiv = angular.element(document.querySelector('#emailDiv'));
var element = $compile('<div id="' + mailTxtId + '" style="margin-left: -60px; width:200px; margin-top:15px"><input id= "' + mailModel + '" type = "text" class="form-control" ng-model="' + mailModel + '" ng-blur="validateEmailDynamic(' + valid + ')">' +
'<input id="' + valid + '" class="form-control" style="margin-left: 206px; width:54px; margin-top:-34px" type="button" value="-" ng-click="deleteField(' + valid + ')"><span ng-show ="' + hide + '" style="color:red">' +
'Invalid email</span></div>')($scope);
emailDiv.append(element);
valid = valid + 1;
}
};
But not getting the value of ng-model.
Store your input box in a directive's template. Then add ng-class that would determine whether it should show or not.
app.directive('inputBox', function(){
template:'<input ng-model="item">'
});
Usage in the html:
<div ng-class="{ input-box : triggerInputBox }"></div>
Controller:
$scope.triggerInputBox = true;
This is just one of many ways to accomplish this. But directives are very useful for dynamically showing templates.
Related
I know that I can format a cell to parse content as a link in ng-repeat:
<a ng-href="{{::domainname}}/{{::row.sector}}/{{::row.cname}}/ipo-{{::row.tickerbb}}.html">{{::row.cname}}</a>
Here is the fiddle.
How do I make it dynamic, so that if row.tickerbb is null - show a different URL?
I tried to do it in the controller, looping through the data:
var i = 0;
$.each(data, function () {
if (data[i].tickerbb != null) {
data[i].cname = '<a title="' + data[i].cname + '"' + ' ng-href="' + domainname + '/' + data[i].sector + '/' + data[i].shortcname + '/ipo-' + data[i].tickerbb + '.html">' + data[i].cname + '</a>';
}
else {
data[i].cname = '<a title="' + data[i].cname + '" href="Holdings">' + data[i].cname + '</a>';
}
i += 1;
})
But the results show up as raw html tags:
How do I do conditional formatting of the smart-table cell? Or is there a way to sanitize cells in smart-tables?
Resolved it by constructing my link in the controller:
var i = 0;
$.each(data, function () {
data[i].weight = (data[i].weight * 100).toFixed(2) + '%';
if (data[i].shortcname != null) {
var cname = data[i].cname;
var sector = data[i].sector;
var shortcname = data[i].shortcname;
var tic = data[i].tickerbb;
var url = '<a title="' + cname + '" href="' + $scope.domainname + '/' + sector + '/' + shortcname + '/ipo-' + tic + '.html">' + cname + '</a>';
data[i].cname = url;
}
else
{
data[i].cname = '<a title="' + data[i].cname + '" href="Holdings">' + data[i].cname + '</a>';
}
i += 1;
})
And then sanitizing it inside ng-repeat:
<td ng-bind-html="row.cname"></td>
I am having a angularjs treeview, it is working fine in all respects except the load time with a large data. In my case it is taking at-least 10 sec to load the tree which is obviously not acceptable. There is no issue with getting the data. The data I need to create the tree is coming in milliseconds but the tree creation time is high. I have tried few of things for that but nothing worked out.
Now, what I want is that, instead of creating the whole tree at the first time it should be created in parts like initially only the parent nodes should be shown and when the user clicks on any node then only the child nodes of that parent should be created. In this way we can reduce the size of tree model we are providing initially and thus the creation time will also be reduced. But now the problem is I don't know how to do this, because whatever I tried didn't worked. If anyone have any idea about that please help me.
If there is any other way to reduce the time, please tell me that also. I just want to load it within milliseconds.
Here is the HTML file:
<div class="nowrap"
style="height: 400px; overflow: scroll;">
<div data-angular-treeview="true"
data-tree-id="mytree"
data-tree-model="roleList"
data-node-id="id"
data-node-label="name"
data-node-children="children"
my-event="selectNode"
data-collapsed="true"
data-search-query="treeSearchQuery">
</div>
</div>
angular.treeview.js:
(function ( angular ) {
'use strict';
angular.module( 'angularTreeview', [] )
.directive( 'treeModel', ['$compile', function( $compile ) {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//children
var nodeChildren = attrs.nodeChildren || 'children';
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="collapsed" data-ng-show="node.' + nodeChildren
+ '.length && node.collapsed" data-ng-click="'
+ treeId + '.selectNodeHead(node)">
</i>' +
'<i class="expanded" data-ng-show="node.' + nodeChildren
+ '.length && !node.collapsed" data-ng-click="'
+ treeId + '.selectNodeHead(node)">
</i>' +
'<i class="normal" data-ng-hide="node.' + nodeChildren
+ '.length">
</i> ' +
'<span data-ng-class="node.selected" data-ng-click="'
+ treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel
+ '}}
</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId
+ '" data-tree-model="node.' + nodeChildren
+ '" data-node-id=' + nodeId + ' data-node-label='
+ nodeLabel + ' data-node-children=' + nodeChildren + '>
</div>' +
'</li>' +
'</ul>';
var event = attrs.myEvent;
//check tree id, tree model
if( treeId && treeModel ) {
//root node
if( attrs.angularTreeview ) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead
|| function( selectedNode ){
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
};
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel
|| function( selectedNode ){
//remove highlight from previous node
if( scope[treeId].currentNode
&& scope[treeId].currentNode.selected ) {
scope[treeId].currentNode.selected = undefined;
}
//set highlight to selected node
selectedNode.selected = 'selected';
//set currentNode
scope[treeId].currentNode = selectedNode;
};
}
//Rendering template.
element.html('').append( $compile( template )( scope ) );
}
}
};
}]);
})( angular );
Controller:
rsBaseApp.controller('cascadingTreeCtrl', [
'$scope','rsSiteServerTreeViewFactory', function ($scope,rsSiteServerTreeViewFactory) {
$scope.getdata = function () {
rsSiteServerTreeViewFactory.get(function (response) {
$scope.roleList = response.data;
},
function (errorInfo) {
//alert("Some error occured");
});
}
$scope.getdata();
}
]);
I'm working for iPhone application using phonegap. In the application there are few dropdowns whose values are more the 10000. Now we are trying to replace the dropdown with Autocomplete.
We are maintaining those 10000 records in SQLite DB and fetch the records from the DB as user enters the string.
CODE:
<input type ="text" class="inputFormText" ng-model="Location.location" id="location" list ="locValues" placeholder="{{'lSummary_Location_text'|translate}}" autocomplete = "on" maxlength="80" ng-keyup="populateLocations($event)"/>
<div class="aListCon">
<datalist id="locValues">
</datalist>
</div>
$scope.populateLocations = function($event){
if ($event.target.value.length > 2) {
try
{
db.transaction(function(tx){
tx.executeSql("SELECT ID, VALUE FROM tbl_Location WHERE VALUE LIKE '%" + $event.target.value + "%'", [],
function(tx, res){
if(res.rows.length > 0)
{
var template = "";
for (var i = 0; i < res.rows.length; i++) {
var id = res.rows.item(i).value + ' / ID: ' + res.rows.item(i).id;
template += '<option class="aCon" id="' + id + '" value="' + res.rows.item(i).value + '"></option>';
};
document.getElementById('locValues').innerHTML = template;
}
else
console.log("No records found")
},
function(ex){
console.log("Populate Location Error: " + ex.message);
});
});
}
catch(ex)
{
console.log("Populate Location Error: " + ex.message);
}
};
};
I was able to fetch the records form the SQLite and append to the datalist, but Autocomplete is not displayed in the UI.
Any idea where I'm going wrong?
Thanks in advance
This code should be working:
var divtoappend=angular.element( document.querySelector( '#locValues' ) );
divtoappend.append("<option class="aCon" id="' + id + '" value="' + res.rows.item(i).value + '"></option>");
I am Bootstrap Select user in IE11.
When I fill data with ajax and open it then it automatically move down wards and when I select any value then it's not selected. How can I remove this error?
jQuery.ajax({
url: base_url + "UserBusinesses/ajaxState/" + countryId,
dataType: 'json',
beforeSend: function () {
$('#UserBusinessStateId').html('<option value="">Loding... </option>');
$('#UserBusinessStateId').selectpicker('refresh');
$('#UserBusinessCityId').html('<option value="">Select city</option>');
$('#UserBusinessCityId').selectpicker('refresh');
},
success: function (obj) {
var addHtml = '';
addHtml += '<option value="">Select state</option>';
$.each(obj, function (key, value) {
var selected = "";
if (selectedState == key) {
var selected = "selected='selected'";
}
addHtml += "<option value='" + key + "' " + selected + ">" + value + "</option>";
});
jQuery("#UserBusinessStateId").html(addHtml);
$('#UserBusinessStateId').selectpicker('refresh');
}
});
I am facing this issue In IE and I have find the solution
$('#UserBusinessStateId').selectpicker('refresh');
remove this and add this code
$('#UserBusinessStateId').selectpicker('render').selectpicker('refresh');
// Calling the video function with JSON
$.getJSON("videos.php", function(data){
// first check if there is a member available to display,
//if not then show error message
if(data == '') {
$('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
}
// if there is a member, then loop through each data available
else {
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").html(content);
});
}
});
The problem is that it only gives me one result instead of list of results from the array but if I appendTo(content) .. it adds the full list of results under the current which is not what I want because I need to refresh that content with updated data.
Any ideas to what I'm doing wrong?
Probably so far only the last Element is getting Displayed .
// Calling the video function with JSON
$.getJSON("videos.php", function(data){
// first check if there is a member available to display, if not then show error message
if(data == '') {
$('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
}
// if there is a member, then loop through each data available
else {
//If you want to Clear the Container html
$("#tabs-4").html('');
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").append(content);
});
}
});
Empty the element before filling it:
$('#tabs-4').empty();
$.each(data, function(i,name){
var content =
'<div class="left"><img src="' + name.pic + '"/>' +
'<p>' + name.name + '</p>' +
'Video link' +
'</div><br/><hr>';
$("#tabs-4").append(content);
});
Or put all the elements in the string before putting it in the element:
var content = '';
$.each(data, function(i,name){
content +=
'<div class="left"><img src="' + name.pic + '"/>' +
'<p>' + name.name + '</p>' +
'Video link' +
'</div><br/><hr>';
});
$("#tabs-4").html(content);
If I well understood, probably you may want do something like this
...
else {
$("#tabs-4").empty(); // remove previous data (if any)
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").append(content); // append new data
});
}