I have three arrays, and i every item has the checkbox. I need to hide each checked element
<ul class="list" v-for="item in technicType" :key="item.name">// looping array
<li v-show="hidden">{{item.name}}// show property
<span><input type="checkbox" :value="item.name" v-model="checked"></span>
</li>// checkbox
</ul>
<ul class="list" v-for="item in model" :key="item.name">// looping array
<li>{{item.name}}// array item
<span><input type="checkbox" :value="item.name" v-model="checked"></span>// checkbox
</li>
</ul>
<ul class="list" v-for="item in technic" :key="item.name">//looping array
<li>{{item.name}}// array item
<span><input type="checkbox" :value="item.name" v-model="checked"></span>// checkbox
</li>
</ul>
data(){
return{
technicType: [],//array i am getting from api
hidden: true,
model: [],//array i am getting from api
technic: [],//array i am getting from api
checked: []
}
}
hideItem(id){
this.hidden = id
}
I need to hide the checked item. How could i implement this?
First of all pay attention, you attach v-for directive to li tag, not to ul. Otherwise it will create multiple ul's instead of multiple li's.
Second, v-if and v-show are suitable in case of conditions only. For example in case you need to modify clicked item (by color, underlining, etc). But not suitable for removing forever.
Third, you do not need to create ID's manually for every item in your array. In v-for directive, besides item itself you can also pass its index, like so v-for="(item,index) in technicType". So when you'll be calling hideItem method you can pass index as an argument. #click = "hideItem(index)" so it will pass current item's index in your array.
And in the end in Vue instance you just splice your array like so
hideItem(index){
this.technicType.splice(index, 1);
}
It will delete item with index that you passed from html.
Related
<ul *ngFor="#item of items; #i=index" >
<li [hidden]="{{ item.myattr === 'some_value' }}"> {{ item.val}} </li>
</ul>
I have the following code shown above. I want hide the list if the item has a value equal some value. In this case I have the items, they have an attribute called myattr, and if it is equal to some_value then the item should be hidden. The code I provided though does not work.
You don't need to use interpolation {{}} with property binding [] (actually, you can't):
<li [hidden]="item.myattr === 'some_value'">
Also, read Mistake #1: Binding to the native "hidden" property in http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
So a better solution is likely
<li *ngIf="item.myattr !== 'some_value'">
You can basically use ng-hide also like;
<li ng-hide="item.myattr =='some_value'"> {{item.val}} </li>
assuming that item.myattr is the same type with some_value.
I think is better to use pipe to filter out unneeded items.
https://angular.io/docs/ts/latest/guide/pipes.html
I have this markup:
<div data-bind="foreach: package() ? package().Products() : []">
<ul data-bind="foreach: Items">
<li>
<div>
<img data-bind="attr: { src: ImageUrl, alt: 'ItemId_' + ItemId }">
</div>
</li>
</ul>
</div>
What I want to achieve (in the markup if possible) is to display only distinct items based on the ItemId, so if there are multiple items with the same ItemId I'll display only one of them.
Is it possible to do that in the markup data-bind property?
There is no straightforward way to filter for unique items in the HTML, and it isn't in keeping with good Knockout programming to put program logic into the HTML. Make a computed that collects the unique items and iterate over the computed.
I want to take the $index from the repeater and save it on the current node in a prop called sort.
somehow like this
<li ng-repeat="node in rootNodeLst | orderBy:'node.Sort'"
ng-include="'nodes_renderer.html'" ng-mode=['node.Sort' = $index]></li>
where the line below shows what to focus on here.
ng-mode=['node.Sort' = $index]
So. Take the ng-repeat index, and save it on the current child node's prop called Sort.
the reason behind this is that i need to have the sort updated when i move the elements in the <li>
can this be done?
In your ng-repeat directive add ng-init like this
<li ng-repeat="node in rootNodeLst" ng-init="node.Sort = $index">
{{ node.Sort }}
</li>
http://plnkr.co/edit/WeUeBxGBJVUYErWY3hAX
Currently I'm using a ng-repeat to go over some json data to produce an unordered list. I have a ng-click handler on each list item, which when clicked I need to gather all the data from the current list item clicked (including the item.things (array)) and send it over to a below referenced 'delete' function.
I thought passing $event would do it but I can't seem to find the data in it.
Example:
<ul>
<li ng-repeat="item in items" ng-click="delete($event)">
{{item.id}}
<span ng-repeat="thing in item.things">
{{thing.id}}
</span>
</li>
</ul>
Which produces:
Item 1
Thing X
Thing Y
Item 2
Thing X
Thing Y
..etc etc
<li ng-repeat="item in items" ng-click="delete(item)">
This should work.
If I have a ng-repeat directive bind with my initial data,
<!-- list 1-->
<li ng-repeat="data in datas">{{data.name}}</li>
and I change the data by another ng-repeat and ng-model directive,
<!-- list 2-->
<li ng-repeat="data in datas">
<input type="text" ng-model="data.name">
</li>
In Angular way, any method can do list 1 ng-repeat data refresh not immediately (after I click a Save button)?
<button ng-click="save()">Save</button>
You can use a second (temporary) clone to make the changes and copy the changes over to the actual object using angular.copy.
The actual list:
<ul><li ng-repeat="item in items">
{{item.name}} (id: {{item.id}})
</li></ul>
Edit the list:
<ul><li ng-repeat="item in tempCopy">
<input type="text" ng-model="item.name" />
</li></ul>
<button ng-click="persistChanges()">Save</button>
<button ng-click="discardChanges()">Discard</button
In your controller:
/* Persist the changes */
$scope.persistChanges = function () {
angular.copy($scope.model.tempCopy, $scope.model.items);
};
/* Discard the changes */
$scope.discardChanges = function () {
angular.copy($scope.model.items, $scope.model.tempCopy);
};
See, also, this short demo.
Finally, there is a similar example on the Angular docs on angular.copy.
It seems you are creating new items within datas by extending the array by one element? If this is so, why not use a different model for the form and push the result onto the array data when the save button is clicked?
Similarly, when editing an item, clone the array element and make it the model for the resulting form, then modify the original array element when the save button is clicked.