I try to use angular-ui-tree, but collapse not working. I use example from their github with minor changes, but id did not help.
My example:
http://plnkr.co/edit/MIMQ0GWnhQnZ1AhhKzo5?p=preview
<body ng-controller="tCtrl">
<div class="tree">
<div class="row">
<div class="col-sm-12">
<h3>Basic Example</h3>
<button ng-click="expandAll()">Expand all</button>
<button ng-click="collapseAll()">Collapse all</button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div ui-tree="" id="tree-root">
<ol ui-tree-nodes="" ng-model="listss">
<li ng-repeat="t in listss" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button data-nodrag="" ng-click="toggle(this)">saad</button>
{{t.name}}
</div>
<ol ui-tree-nodes="" ng-model="t.list" ng-class="{hidden: collapsed}">
<li ng-repeat="s in t.list" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button ng-click="toggle(this)">sad</button>
{{s.name}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
You miss CSS class. Please, insert your file CSS.
.hidden {
display: none!important;
visibility: hidden!important;
}
Github use bootstrap.min.css
Try the following things:
add some options from in your controller:
$scope.treeOptions = {
accept: function (sourceNodeScope, destNodesScope, destIndex) {
return false;
},
};
2.get the treeview:
var getRootNodesScope = function () {
return angular.element(document.getElementById("tree-root")).scope();
};
add the collapse / expand functions to your controller:
$scope.collapseAll = function () {
var scope = getRootNodesScope();
scope.collapseAll();
};
$scope.expandAll = function () {
var scope = getRootNodesScope();
scope.expandAll();
};
Replace the following line :<div ui-tree="" id="tree-root">
with div ui-tree="treeOptions>"
5.Optional: Place the id="tree-root" on your <ol> element.
Related
Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!
Directive template :
<script type="text/ng-template" id="child-map.html">
<b ng-click="selectNode(child.id)">{{child.title}}</b>
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children" ng-include="clild-map.html"></li>
</ul>
</script>
<b ng-click="selectNode(mapData.id)">{{mapData.title}}</b>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children" ng-include="child-map.html" ></li>
</ul>
Directive definition :
function widgetNodeMap () {
var nodeMap = {};
nodeMap.restrict = 'E'
nodeMap.scope = {
'mapData' : '=mapData'
}
nodeMap.controller = ['$scope',function($scope){
// $scope.currentNode = $scope.mapData.id;
$scope.selectNode = function(node_id){
$scope.currentNode = node_id;
}
$scope.getCurrentNode = function(){
return $scope.currentNode;
}
}];
nodeMap.templateUrl = '/static/app/components/widget/widget.view.node-map.html';
return nodeMap
}
Main template :
<widget-node-map map-data="navCtrl.mapData">
</widget-node-map>
But still i cannot get the data listed properly. Can you help me, where Im wrong?
I figured the solution
<script type="text/ng-template" id="child-map.html">
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</script>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 col-sm-12 col-xs-12">
<a ng-click="selectNode(mapData)">{{mapData.title}}</a>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</div>
</div>
This is used for match the following option.
While I drag the div id 'div2' along with this first div id 'div1' also to be dragged. how to set draggable false for div id 'div1'
.controller('BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2', function($scope, $stateParams, $http)
{
$scope.OnDropComplete = function (index, source)
{
var otherObj = $scope.category_Question[index];
var otherIndex = $scope.category_Question.indexOf(source);
$scope.category_Question[index] = source;
$scope.category_Question[otherIndex] = otherObj;
}
})
--------------------------------------------------------
<div ng-repeat="source in category_Question" ng-controller="BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2" >
<div class="card" id="div1" draggable="false">
<div class="item item-divider">{{ $index+1 }}.Sentence </div>
<div class="item item-text-wrap" style="color:#CC0066;font-weight:bold;">{{ source.Sentance }}</div>
</div>
<div class="card" id="div2" ng-drop="true" ng-drop-success="OnDropComplete($index,$data)">
<div ng-drag="true" ng-drag-data="source" ng-class="source.Response">
<div class="item item-divider">Response</div>
<div class="item item-text-wrap"> {{ source.Response }} </div>
</div>
</div>
</div>
--------------------------------------------------------
You're using the wrong attribute. draggable="false".
It should be ng-cancel-drag
Your html would look like:
<div class="card" id="div1" ng-cancel-drag>
...
</div>
I am trying to create random span sized divs(.childBox) of twitter bootstrap using AngularJS.
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" class="col-md-{{boxSpan}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
controller('HomeCtrl', ['$scope', '$http', function($scope,$http) {
$http.get('news/abc.json').success(function(data) {
$scope.news = data;
});
$scope.holderSize = 150;
$scope.holderLink = 'http://placehold.it/'+$scope.holderSize+'x'+$scope.holderSize;
$scope.boxSpan = getRandomSpan();
function getRandomSpan(){
return Math.floor((Math.random()*6)+1);
};
}])
I want to create different integer value for boxSpan for each .childBox div but all .childBox have same boxSpan value. Although everytime i refresh page boxSpan creates random value.
How can i generate different/random value for each ng-repeat iteration?
Just call add getRandomSpan() function to your scope and call it in your template:
$scope.getRandomSpan = function(){
return Math.floor((Math.random()*6)+1);
}
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" class="col-md-{{getRandomSpan()}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
As an alternative to the accepted answer, since you're likely to reuse this function, you can turn it into a filter for convenience:
angular.module('myApp').filter('randomize', function() {
return function(input, scope) {
if (input!=null && input!=undefined && input > 1) {
return Math.floor((Math.random()*input)+1);
}
}
});
Then, you can define the max and use it anywhere on your app:
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" class="col-md-{{6 | randomize}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
Improvisation of the accepted answer to prevent digest overflow:
var rand = 1;
$scope.initRand = function(){
rand = Math.floor((Math.random()*6)+1)
}
$scope.getRandomSpan = function(){
return rand;
}
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" ng-init="initRand()" class="col-md-{{getRandomSpan()}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
My HTML is as follows:
<div class="cell">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()"></i>
</div>
</div>
When you click the <i>, I want to add an active class to the parent that has .cell currently. How is this doable with AngularJS?
OK, according to your last comment, if your cells are in a loop you should have mentioned that in your question. I'm gonna assume you use ng-repeat.
I have something like this which works. The active class also get removed if you click another.
HTML:
<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}">
<div class="offset-container pull-left">
<i data-ng-click="activate($index)">Activate Me</i>
</div>
</div>
Controller:
$scope.activate= function(index){
$scope.index=index;
};
Here is one way, using ng-class
<div class="cell" ng-class="{'active': isActive==true}">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()">clicky</i>
</div>
</div>
controller:
function MyCtrl($scope) {
$scope.doCtrlStuff = function(){
$scope.isActive = true;
}
}
<div class="cell" ng-class="{'active': isActive}">
<div class="offset-container pull-left">
<i data-ng-click="isActive = !isActive"></i>
</div>
</div>
You can do this from here: http://docs.angularjs.org/api/ng.directive:ngClass
<div data-ng-class="{cell:true, active:clickedIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()"></i>
</div>
</div>
You would use a class:boolean pattern for the ng-class expression.
And in your controller:
$scope.doCtrlStuff = function() {
$scope.clickedIcon = true;
}
UPDATE:
If you want to do a radio button:
<div data-ng-class="{cell:true, active:clickedDogIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doDogStuff()"></i>
</div>
</div>
<div data-ng-class="{cell:true, active:clickedCatIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doCatStuff()"></i>
</div>
</div>
$scope.doDogStuff = function() {
$scope.clickedDogIcon = true;
$scope.clickedCatIcon = false;
}
$scope.doCatStuff = function() {
$scope.clickedDogIcon = false;
$scope.clickedCatIcon = true;
}