I have a tree structure that contains a folder as parent and files as children, but the same folder can also contain another folder as a child. At the first time the only visible items are the folders that can be clicked to see their files.
My problem is that when I click on the parent folder the child folder gets expanded too and I want to only see the files of the clicked folder.
For example (JSFIDDLE) when I click on parent folder I don't want the child folder to be also expanded until I click on it.
This is my code (the code structure must not be changed):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
<div class="folder-group">
<span class="folder-title" ng-click="openFolder=!openFolder">
<i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
folder parent
</span>
<ul ng-show="openFolder">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
<li class="children-folder">
<span class="folder-title" ng-click="openFolder=!openFolder">
<i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
folder children
</span>
<ul ng-show="openFolder">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
</ul>
</li>
</ul>
</div>
</div>
This is the original template:
<span class="folder-title" ng-click="get_menu_items(folder); openFolder =! openFolder;">
<i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
{{ folder.name }}
</span>
<ul ng-show="openFolder">
<li class="item" ng-repeat="file in folder.files">
<label>
<input class='file-list-item' type="checkbox" name="file_map[]" value="{{ file.id }}" ng-model="file_map[file.id]" ng-click="update_selection($event)" />
<i class="fa fa-file-o"></i>
<span>{{ file.name }}</span>
</label>
</li>
<li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>
scope.get_menu_items = function(folder) {
folders_service.get_sub_folders(folder, false, function(folders, files) {
}, function(err, status) {
scope.handle_top_level_errors(err, status);
});
}
Just rename the ng-click for children folder
<li class="children-folder">
<span class="folder-title" ng-click="openFolder2=!openFolder2">
<i class="fa {{openFolder2 ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
<i class="fa fa-folder-o"></i>
folder children
</span>
<ul ng-show="openFolder2">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
</ul>
</li>
EDIT 2:
In your folder function,
You need to add _{{$index+1}} along with the openFolder name along with the loop such the names come up as openFolder_1, openFolder_2.. . I am unable to pin point your function with the above details
This following is just for reference purpose.
<li ng-repeat="name in names">{{openFolder}}_{{$index+1}}</li>
results in
openFolder_1
openFolder_2
Related
I have the following HTML element:
<ul id="list">
<!-- <li class="item">
<i class="fa fa-circle-thin co" job="complete" id="0"></i>
<i class="fa fa-circle-check co" job="complete" id="0"></i>
<p class="text">Drink Coffee</p>
<i class="fa fa-trash-o de" job="delete" id="0"></i>
</li> -->
</ul>
I am populating the li items using javascript as below:
const listItem = document.createElement('li');
listItem.className = 'item';
listItem.innerHTML = `
<i class="fa fa-circle-thin co" job="complete" id="0"></i>
<!-- <i class="fa fa-circle-check co" job="complete" id="0"></i> -->
<p class="text">${todoItem.title}</p>
<i class="fa fa-trash-o de" job="delete" id="0"></i>
`;
listElement.appendChild(listItem);
todoItem is an instance of a TodoItem object:
class TodoItem{
constructor(title, status){
this.title = title;
this.status = status;
//this.isDone = false;
}
}
This is working fine and I am getting the list populated. I have also managed to update the list items when clicked by striking it through like below:
target.parentElement.getElementsByClassName('text')[0].innerHTML = `<s>${todoItem.title}</s>`;
Now I am having problem updating the items to remove the strikethrough. I am trying below code.
const strikeElement = target.parentElement.getElementsByTagName('s')[0];
console.log(textElement)
console.log(strikeElement);
todoItem = new TodoItem(target.parentElement.getElementsByClassName('text')[0].innerHTML, itemStatus.pending);
textElement.replaceChildren();
console.log(target.parentElement.getElementsByClassName('text')[0])
target.parentElement.getElementsByClassName('text')[0].innerHTML = `${todoItem.title}`;
Here is what I get from console for the above code. Notice the insertion of tags everytime I click the list item.
Well, I have a problem when creating fields for data editing. The problem is that when editing, all fields with the product name are activated instead of one specific. I know the problem is because I only have one variable responsible for enabling the edit box, but creating more variables will not solve the problem because then there may be thousands of such records.
HTML:
<ul>
<li v-for="product in products" class="single-product" v-bind:key="product.id_product">
<i style="color:#df4a49;padding:5px;" class="fa-solid fa-xmark fa-xl" #click="deleteProduct(product.id_product)"></i>
<p class="product-name"><i #click="enableEditing(product.name)" class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>
<span v-if="!editing">{{product.name}}</span> <span v-if="editing"> <input v-model="tempValue" class="input"/>
<button #click="disableEditing"> Edit</button>
<button #click="saveEdit"> Save</button>
</span>
</p>
<span class="product-localization"><span><i class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>Lokalizacja: </span>{{produkt.lokalizacja}}</span> <span class="product-key"><span><i class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>Klucz: </span>{{product.key}}</span>
<hr />
</li>
</ul>
Data:
editing:false,
tempValue: null,
methods:
enableEditing: function(tempProductName){
this.tempValue = tempProductName;
this.editing=true;
},
disableEditing: function(){
this.tempValue = null;
this.editing = false;
},
saveEdit: function(){
this.value = this.tempValue;
this.disableEditing();
}
I wrote the next code, but when I click on the trash icon, the ng-click of this element is thrown, but the ng-click of the div container is thrown too, I don't need the second one, just the first call, could some body help me.
<div ng-if="order.selectedProducts === null || order.selectedProducts.length > 0"
class="cartCol hoverable" ng-repeat="product in order.selectedProducts track by $index"
ng-click="showProductDetailed(product)">
<div class="cartHeading" ng-bind="product.name"></div>
<a href="" class="trashIcon" ng-click="removeSelectedProduct(product);">
<i class="fa fa-trash"></i>
</a>
<div class="cartSizeInfo">
<span class="fltLft">{{product.productTypeName}}</span>
<span class="fltRht">Bs. {{product.price}}</span>
</div>
</div>
I had to put $event.stopPropagation(); after the first call.
I'm trying to add some items in the list using material icon. Here items are adding permanently by ng-click="contactDetails.contactModes.push(numbers);".
I have given 2 buttons on bottom of the card i.e save and discard. but problem is whenever material icon is clicked values get added in the list. Means No use of discard. My aim is to add values temporary on the list so that when ever user click on saved then only values get saved otherwise discarded.
Please suggest
MY CODE:
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList" ng-click="contactDetails.contactModes.push(numbers);">
<i ng-show="numbers.type == 'sample'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<img class="pad-right-5 md-avatar dime-30" ng-show="numbers.type == 'PAGER'" src="assets/img/contact-pref/pager.png" width="26" style="width:30px;height:28px;margin-left: 5px;">
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right">add</i>
</md-list-item>
Please suggest.
I have used Temporary variable in controller
$scope.arrayText = [{
"type": "sample",
"value": "test"
}];
and made following changes in the code to add temporary and finally using contactDetails.contactModes = arrayText on ng-click added permanently using save button
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList" >
<i ng-show="numbers.type == 'TruliaCare'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<img class="pad-right-5 md-avatar dime-30" ng-show="numbers.type == 'PAGER'" src="assets/img/contact-pref/pager.png" width="26" style="width:30px;height:28px;margin-left: 5px;">
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="arrayText.push(numbers);">add</i>
</md-list-item>
I am trying to add context menu but value is not populating.
<div class="m-l">
<a class="item-country text-orange" href="#/app/CountryIps/{{item.data['name']}}/cCode/{{item.data['country-code']}}" target="_blank">
{{item['data']['name']}}
</a>
<a class="item-ip" href="#/app/showIps/{{item.data['name']}}/ip/{{item.data['Ip']}}" target="_blank"><span context-menu="whiteList"> {{item.data['Ip']}}</span> </a>
{{item.data['type']}}
<a class="detail-icon" data-popup-open="popup-1" href="" ng-click="showModal(item)">
<i class="fa fa-info-circle"></i>
</a>
</div>
Javascript
$scope.whiteList = [
['Add to white list', function($itemScope, $event, ip) {
whiteList(ip);
}]
];
Now when I add context from template I got undefined in ip in controller.
<a onClick="window.location.href='your link'">
I fixed it by myself to checking values of the $itemscope.
$itemScope.$parent.item.data.Ip
To get the value of the IP from template to controllers.