I have a repeater that looks like
<ion-item ng-repeat="obj in data">
{{obj.value}}
</ion-item>
which displays an item list of the numbers 1 through 10. When an odd number shows up I want that particular item to be hidden. Is this something I can do within the view it's self? Regardless what's a good way to do this?
You have to control your data set in your controller:
$scope.ProId = "";
$scope.HideOdd = function (){
-- create a function to hide DATA
}
and on your ion tag ad ng-hide="HideOdd"
Related
My main page renders a list of data coming from controller with foreach
#foreach ($sales as $sale)
<button id="{{$sale->id}}" #click="editClicked({{$sale}})">
#endforeach
I have an edit component placed on the page like this, I display it modally via showEditModal conditional
<edit v-if="showEditModal" #hide="showEditModal=false"></edit>
The component in brief is declared in Edit.vue:
<template name="edit">
...
</template>
This is simply a standard form with input fields, bound via v-model to the sale.
Essentially it is an update form, I intend to load the data from the main page into each input field to be edited.
My app.js simply sets showEditModal = true, in order to display the edit form on top of the main page.
Basically i don't want to have to call controller via GET method on loading the modal since i already have the data in the main page as $sale object, so im just wondering how do I pass in the $sale to the Edit.vue component ?
I thought that in the <edit> component usage, it would need to bind the sale object, however I'm unsure how that would work since it comes from the foreach loop.
I do, also have the data in the app.js method as passed in via #click="editClicked({{$sale}})", but again, i'm unsure how to use that to pass through ?
You're right, you would want to pass the current sale item as a property to the edit modal. What I would do is add a data property to your main Vue called selectedSale.
data:{
selectedSale: null
}
Then in your editClicked method, set selectedSale
methods:{
editClicked(sale){
this.selectedSale = sale
...
}
}
Finally, pass it as a property.
<edit :sale="selectedSale" v-if="showEditModal" #hide="showEditModal=false"></edit>
I have a kendo ui listview with a template the conditionally hides elements based on the underlying data. An example would be as follows:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
<div>
# if (Discontinued) { #
Discontinued Product
# } #
</div>
</div>
</script>
If i modify the underlying dataSource items to set Discontinued with the following code:
data[index].set('Discontinued', true);
If the index is the currently selected item then that item looses focus and is no longer selected.
Please see the following dojo example http://dojo.telerik.com/UlOze, select an item from the list and then set it to discontinued.
Has anybody found a solution / workaround for this issue ?
Thanks.
------------- FINAL SOLUTION --------------
Following on from dimodi's answer below I pieced together the solution.. For this to work the dataSource must have the schema -> model -> id property set.
1st capture the currently selected data item:
var selectedItem = $(listElement).find(".k-state-selected");
var selectedDataItem = list.dataItem(selectedItem);
2nd: After calling .set re-find the data item and set the k-state-selected class. This is nessesary as the list component is regenerating the uid's.
if (selectedDataItem) {
var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
var uid = newSelectedItem.uid;
jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
}
I've updated the original dojo to show this solution, incase it helps someone else.
When a data item is changed, its corresponding ListView item is re-rendered to apply the changes. As a result, the selection is lost, as it is a purely visual feature that is not persisted across rebinds. You can check if an item is selected before using set() and then restore the selection manually by applying a k-state-selected class to the element afterwards.
Is there any way to know that view is open by back?
For example
<div data-role="view" id="view-test" data-show="show">
<!-- View content -->
</div>
<script>
var show = function(e){
if(e.view.isBack())
{
console.log("Back")
// do something
}
}
</script>
Is there any method or property like e.view.isBack() ?
There are many ways to handle this, maybe you can use a global variable where you keep the last visited page or even you can add a back button handler and get the view from which the back button was pressed. Another solution would be to pass a parameter along with page navigation when going back, for example:
<a data-role="button" href="#foo?back=true">Link to FOO with back parameter set to true</a>
And on the visited page on show event you can get the parameter like this:
function fooShow(e) {
e.view.params // {back: "true"}
}
Now depending on what the parameter value is you can detect if the back button was pressed or not before reaching the page.
I'm trying using Backbone.Marionette to build an application. The application gets its data through REST calls.
In this application I created a model which contains the following fields:
id
name
language
type
I also created an ItemView that contains a complete form for the model. The template I'm using is this:
<form>
<input id="model-id" class="uneditable-input" name="id" type="text" value="{{id}}"/>
<input id="model-name" class="uneditable-input" name="name" type="text" value="{{name}}" />
<select id="model-language" name="language"></select>
<select id="model-type" name="type"></select>
<button class="btn btn-submit">Save</button>
</form>
(I'm using Twig.js for rendering the templates)
I am able to succesfully fetch a model's data and display the view.
What I want to do now is populate the select boxes for model-language and model-type with options. Language and type fields are to be restricted to values as a result from REST calls as well, i.e. I have a list of languages and a list of types provided to me through REST.
I'm contemplating on having two collections, one for language and one for type, create a view for each (i.e. viewLanguageSelectOptions and viewTypeSelectOptions), which renders the options in the form of the template I specified above. What I am not sure of is if this is possible, or where to do the populating of options and how to set the selected option based on data from the model. It's not clear to me, even by looking at examples and docs available, which Marionette view type this may best be realized with. Maybe I'm looking in the wrong direction.
In other words, I'm stuck right now and I'm wondering of any of you fellow Backbone Marionette users have suggestions or solutions. Hope you can help!
Create a view for a Select in my opinion is not needed in the scenario that you are describing, as Im assuming that your languages list will not be changing often, and the only porpouse is to provide a list from where to pick a value so you can populate your selects in the onRender or initializace function of your view using jquery.
you can make the calls to your REST service and get the lists before rendering your view and pass this list to the view as options and populate your selects on the onRender function
var MyItemView = Backbone.Marionette.ItemView.extend({
initialize : function (options) {
this.languages = options.languages;
this.typeList = options.typeList;
},
template : "#atemplate",
onRender : function () {
this.renderSelect(this.languages, "#languagesSelect", "valueofThelist");
this.renderSelect(this.typeList, "#typesSelect", "valueofThelist")
},
renderSelect :function (list, element, value) {
$.each(list, function(){
_this.$el.find(element).append("<option value='"+this[value]+"'>"+this[value]+"</option>");
});
}
})
var languagesList = getLanguages();
var typeList = getTypesList();
var myItemView = new MyItemView({languages:languagesList,typeList :typeList });
Hope this helps.
I have a complex form that has a static section and one that can have from 0 to many divs that containing radio buttons, textfields and textareas.
I'm wondering what's the best way to add elements to the section that has a variable amount of form inputs. I have a working solution, but it's probably not the best:
I use javascript to add a chunk of html code and append it to the div containing the variable amount of input fields. In the code sample below, my javascript code would do something like
Javascript
document.getElementId('dynamic_form_stuff').innerHTML += "<div id='element3'>Form stuff</div>";
HTML
<form>
<div id="static_form_stuff">
form fields
</div>
<div id="dynamic_form_stuff">
<div id="element1">
Radio buttons stuff
Text field stuff
Text area stuff
</div>
<div id="element2">
Radio buttons stuff
Text field stuff
Text area stuff
</div>
</div>
</form>
I think this largely depends on what you are doing elsewhere, and how many items you are adding, as well as how you want to add event handlers.
I tend to find it easier to use the DOM methods if I need to add event handlers, but if you are just adding to a form with a submit button, then using innerHTML is faster, as shown here: http://www.quirksmode.org/dom/innerhtml.html.
I would personally do something like:
var elem = document.getElementId('dynamic_form_stuff');
var div = document.createElement('div'); // create element
div.setAttribute('class', 'myclass'); // define attributes
elem.appendChild(div);
// and/or more code.....
This gives me more control in adding attributes and style there.