How to add new node at top in ui-tree angular js - angularjs

In my application i used angular ui-tree.
Now to add new node i used below code
<button class="btn btn-info btn-circle btn-sm" type="button" ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})' style="margin-top:15px" data-nodrag><i class="fa fa-plus"></i></button>
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content">
<div style="width:100%">
<div style="width:87%;display: inline-block">
<a class="" style="color:#c1c1c1" data-nodrag ng-click="toggle(this)"><span class="fa" ng-class="{'fa-plus': collapsed, 'fa-minus': !collapsed}"></span>
<span class="label label-info"><i class="fa fa-tasks"></i></span> </a>
<span style="width:80%;word-wrap: break-word" class="remove-editable-click cursor-pointer" editable-text="node.task" buttons="no" e-ng-model="WBSData.task" e-ng-blur="changeFieldEdit(this)" e-required data-nodrag e-style="border:1px solid #DDDDDD;width:90px">
{{node.task}}
</span>
</div>
<div style="width:10%;display: inline-block">
<input icheck type="checkbox" ng-model="node.WBSDataSelectedTask" checklist-value="node.task" style="float:right" value="none">
</div>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.subtasks" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.subtasks" ui-tree-node ng-include="'nodes_renderer1.html'">
</li>
</ol>
</script>
<div ui-tree="treeOptions" id="tree-root">
<ol ui-tree-nodes ng-model="x.tasks">
<li ng-repeat="node in x.tasks" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
By clicking on button it is adding node but adding node at bottom.I need to add that on top.How can i do that?

x.task.push adds item at the end of the array. That's where you need to change
ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})'
Use unshift instead.
ng-click='x.tasks.unshift({task: "New Task",depth:"2", tasks:[]})'
For reference: How can I add new array elements at the beginning of an array in JavaScript?

Related

AngularJS ng-include

I am facing problem below upon using the ng-inculde in angularJS. The bootstrap burger icon is not working. But if i'm not using the ng-include it works perfectly fine. Did I do something wrong?.
Is there any set-up first that I need to do before using the ng-include?.
Main html
...
<body>
<ng-include src="'../Content/Shared/Header.html'"></ng-include>
<ng-view></ng-view>
</body>
....
Include html
<header>
<div class="container">
<div class="row element-holder">
<div class="col-md-2 col-sm-4 col-12">
<a href="../main/index.html" class="text-logo-holder">
<span class="text">My Project</span>
</a>
</div>
<div class="col-md-4 col-sm-6 col-12">
<form ng-submit="searchProducts()" class="search-holder">
<input type="text" class="form-control" placeholder="Search Collection...." list="_items" ng-model="searchText" ng-keyup="searchItemNames()" autocomplete="off" />
<datalist id="_items">
<option ng-repeat="result in results" value="{{result}}">{{result}}</option>
</datalist>
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="col-md-6 col-sm-2 col-12">
<nav class="navbar navbar-expand-lg float-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<img src="../Content/dist/images/icon-header-menu.png" />
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Discover</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item btn-nav-item">
<a class="nav-link" href="" ng-click="logout()" ng-show="isSignedIn">Logout</a>
<a class="nav-link" href="" ng-click="signin()" ng-show="!isSignedIn">Sign In</a>
</li>
<li class="nav-item">
<a id="menu-link" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</li>
</ul>
</div>
</nav>
<div class="mobile-nav float-right">
<a id="menu-link-mobile" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</div>
</div>
</div>
</div>
<div id="sidebar-menu" class="side-menu-content">
<ul class="menu-holder">
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-inbox.png" />
</div>
<div class="col-9">
Inbox
</div>
</a>
</li>
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-purchase.png" />
</div>
<div class="col-9">
Purchases
</div>
</a>
</li>
</ul>
<div class="button-holder row">
<div class="col-6 pl-default pr-default" ng-show="!isSignedIn">
<input type="submit" class="btn btn-primary" value="Login/Sign Up" ng-click="signin()" />
</div>
<div class="col-6 pl-default pr-default" ng-show="isSignedIn">
<input type="submit" class="btn btn-secondary" value="Logout" ng-click="logout()" />
</div>
<div class="col-6 pl-default pr-default">
<input type="submit" class="btn btn-primary" value="Change Password" />
</div>
</div>
</div>
ng-include will:
Fetches, compiles and includes an external HTML fragment.
So that fragment added after page load and your events bind with js will not work on these dynamically added elements. To solve it, you can bind these events with onload arguments which is expression to evaluate when a new partial is loaded. Or you can try attach event to dynamic elements in javascript
Please, remove the single quote.
<div ng-include="../Content/Shared/Header.html"></div>
It seems to be a tag closing issue.
You need to close the <header> tag at the end of Header.html
use this :
<div ng-include src="'../Content/Shared/Header.html'"></div>

Passing value of dropdown to angular js

I wish to set the value of my dropdown and the value of my textbox in ng-model to pass it to my angular js.
The console displays null for the value of my dropdown.
What I've tried:
<form id="uploadForm">
<div id="republishSingle" class="panel-collapse collapse in desc vertical" style="text-align: left">
<div class="horizontal">
<div class="dropdown">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" id="selectSource1" aria-haspopup="true" aria-expanded="true" ng-model="republishSource">
Source system
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<h5 class="dropdown-header">Source system</h5>
<a class="dropdown-item" href="#" data-value="s1">S1</a>
<a class="dropdown-item" href="#" data-value="s2">S2</a>
</div>
</div>
<div class="col-5">
<input class="form-control disableButton" id="policy" type="text" placeholder="Policy" ng-model="republishInput"/>
</div>
<div class="form-group mb-3">
<div class="form-group" aria-label="file upload">
<input id="republish" type="submit" class="btn btn-success"
ng-click="doRepublish(republishSource,republishInput)" value="Republish"/>
</div>
</div>
</div>
</div>
</form>

ng-include directive for angular template

In my index.html code is:
i have written ng-include directive as
and my menu.html file is
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media tab-pane fade in active">
<li class="media" ng-repeat = "dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
but i am not able to get expected result from ng-include directive and i am not able to see menu.html output in my index.html file after opening it in any browser.

Controller runs multiple time on click of item in angularjs?

In web app i am showing list of items using ng-repeat directive of angularjs. And on-click of each item am assigning a summary controller to the summary page (using ui-routing) and shows the result. Currently what happens if there is 10 list items showed using ng-repeat then 10 times summary controller is getting initialized on click of one item. Eventually which makes my app bit slow. Here is my ng-repeat code in html.
<div class="surveyList" ng-repeat="survey in allSurveys | filter:headerObj.search track by $index">
<span class="surveycheckbox" ng-click="toggleClass($event)"></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="surveyIdForQuota(survey.SurveyID)">
<div class="col-xs-5 col-sm-2 col-md-4 surveyitleElipse">{{survey.SurveyName}}</div>
<div class="col-xs-5 col-sm-2 col-md-1">
<span class="title_thumb">
<span class='fa fa-mobile-phone' ng-show="survey.Type=='App'" title="APP" my-Tooltip />
<span class='fa fa-envelope-o' ng-show="survey.Type=='SMS'" title="SMS" my-Tooltip />
<span class='fa fa-desktop' ng-show="survey.Type=='Web'" title="WEB" my-Tooltip/>
</span>
</div>
<div class="col-sm-3 col-md-2 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">124</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey" ng-click="sendsurveyID(survey.SurveyID)" data-surveyID="{{survey.SurveyID}}" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="cloneSurvey" ng-click="cloneSurvey(survey.SurveyID)" title="clone"><i class="fa fa-clone fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
</div>
</div>
<!-- On click Of the list am showing this div box -->
<div class="surveyDetailsBox"> <!--This is the header section -->
<div class="surveyDetailHead">
<p class="surveyTitle">{{survey.SurveyName}}</p>
<div class="surveyDetailHeadTool" >
<a class="editSurvey" title="edit" ng-click="showEditSurveyForm(survey.SurveyID,$index);"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey hidden-xs" ng-click="sendsurveyID(survey.SurveyID)" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
<a class="hidden-xs" title="close"><i class="fa fa-angle-up fa-2"></i></a>
</div>
</div>
<!--This is the body section where summary and other modules are present -->
<div class="surveyDetailContent hidden-xs" ng-if="is_desktop">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-sm-2 col-md-2 leftMenu">
<div class="list-group">
<a ui-sref="survey.surveyList.details" class="list-group-item summary" ui-sref-active="active">Summary</a>
<a ui-sref="survey.surveyList.questionare" class="list-group-item " ui-sref-active="active">Questionaire Management</a>
<a ui-sref="survey.surveyList.sampleManagement" class="list-group-item " ui-sref-active="active">Sample Management</a>
<a ui-sref="survey.surveyList.quotaManagement" class="list-group-item " ui-sref-active="active">Quota Management</a>
<a ui-sref="survey.surveyList.scheduling" class="list-group-item " ui-sref-active="active">Scheduling</a>
<a ui-sref="survey.surveyList.notification" class="list-group-item " ui-sref-active="active">Notifications</a>
<a ui-sref="survey.surveyList.reports" class="list-group-item " ui-sref-active="active">Reports</a>
<a ui-sref="survey.surveyList.location" class="list-group-item " ui-sref-active="active">Geolocation</a>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 rightContent" ui-view></div>
</div>
</div>
</div>
For each sub module like Summary, questionnare etc., one controller is associated.
On click of this list am showing the summary box and running the controller also.
Code for surveyIdForQuota() goes here
$scope.surveyIdForQuota = function(SurveyID){
$rootScope.quotaSurveyID = SurveyID;
$scope.exportViewDetails="";
$http.get(__env.apiUrl+"/UserSurvey/GetInvitationCount?surveyId="+$rootScope.surveysummaryID,{headers:{"Content-type":"application/json",'sessionID':$rootScope.token}}).
then(function(response){
console.log(response);
$scope.summaryDetails = response.data;
},function(error){console.log(error)})
};
ng-click should be add on the item of list
<div class="surveyList" ng-repeat="survey in allSurveys |filter:headerObj.search track by survey.SurveyID"> <div ng-
click="surveyIdForQuota(survey.SurveyID)">)">//rest code inside goes here</div></div>
Your first div is a parent div, but you wrote ng-click on the list. So if you click any place of the div. it will be call the method

Angularjs : How to display data after update on my UI

I have angular project My Requirement is : How to display data after update on my UI without refreshing, Data store in server i want it to display on Contact and Recent Tab immediately after Updating.
UI Bindings:
<li class="media contact-card">
<div class="media-left">
<a ui-sref=".viewClient({'clientId':client._id})">
<img class="media-object img-circle" src="https://placehold.it/42x42" alt="https://placehold.it/64x64">
<!--<div class="circle" ng-class="getRandomColorClass('Xipesh Gandhi')"><p>{{generateInitialChar('Dipesh Gandhi')}}</p></div>-->
</a>
</div>
<div class="media-body">
<div class="pull-left">
<h4 class="media-heading pull-left">{{client.firstName}} {{client.lastName}}</h4>
</div>
<div class="pull-right">
<a class="" ui-sref=".editClient({'clientId':client._id})"> <i class="glyphicon glyphicon-pencil" ></i></a>
<a class=""> <i class="glyphicon glyphicon-trash" ></i></a>
</div>
<div class="clearfix"></div>
<span>{{client.address}}</span>
<span>{{client.birthDate | date:'mediumDate'}}</span>
</div>
</li>
View :
<div class="tab-wrapper">
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Create Meeting </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
</tabset>
</div>
Controller:
$scope.updateClientList = function(client, operation){
if(operations.ADD === operation){
//$scope.clientList.push({firstname: $scope.client.firstName, lastname: $scope.client.lastName});
//$scope.clientList.push(client);
$scope.clientList.push (client);
// $scope.clientList = [];
} else if(operations.EDIT === operation){
} else if(operations.DELETE === operation){
}
$state.go('meeting-home.viewClient', {'clientId':client._id});
};
Does anyone know how to do it?
Please comment $scope.clientList = []; in your code. it will work. Any how you are not mentioning UI binding details.

Resources