Develop Reference

How to hide the option in dropdownlist in Angular JS

I have a dropdownlist and I need to hide one option based on the condition
Mycode is something like below :
$scope.sqs.qs6_PropertyType.answer = _.findWhere($scope.propertyType, { id: '2' });
// this is to set the selected value to 2
I need to Hide the option with value="2" I have written something like below:
$("#qs6_PropertyType").children('option[value="2"]').hide();
I have tried like below as well but its not working
//var qs6obj = angular.element(document.querySelector('#qs6_PropertyType'))
//qs6obj.childElement.remove('option[id="2"]');
HTML :
<td class="cell">
<div data-dropdownlist-question=""
data-ng-model="subject.sqs.qs6_PropertyType"
data-question-attrs="{
questionCell: { visible: false },
answer: {
items: propertyType,
theme: 'native',
style: {
width: '41px'
}
}
}">
</div>
</td>
How to hide the option id ="2"

Can you define a set of selectables for the values in the drop down and bind using ng-options, and remove an item from this when you initialise your form?

I have Filtered the object something like below:
$scope.propertyType = $scope.propertyType.filter(function (e) { return e.id !== '2' })

Error while binding the selected value with DevExtreme and KnockOut

I trying to develop a little app.
I have made a login view and it works, I am able to bind the data written by the user. After this, I show two select box. The first is binded with a list (correctly) and the second has to be bind with a list populated after a value is selected from the first.
I'm not able to read the value selected from the first list.
I have this html:
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Rete</div>
<div class="dx-field-value"
data-bind="dxLookup: { dataSource: is_retistiSource, value: rete, displayExpr: 'NOME', title: 'Retisti associati', placeholder: 'Selezionare rete',
onSelectionChanged:setRete }" />
</div>
<div class="dx-field">
<div class="dx-field-label">Impianto</div>
<div class="dx-field-value"
data-bind="dxLookup: { dataSource: is_impiantiSource, value: impianto, displayExpr: 'NOME', title: 'Impianti associati', placeholder: 'Selezionare impianto' }" />
</div>
</div>
and this javascript:
OverviewAPP.afterLogin = function (params) {
var isReady = $.Deferred();
var viewModel = {
rete: ko.observable(""),
impianto: ko.observable(""),
is_retistiSource: OverviewAPP.listaReti,
is_impiantiSource: OverviewAPP.listaImpianti,
setRete: function () {
console.log(viewModel.rete);
var nRetisti = OverviewAPP.listaRetiImpianti.length;
for (i = 0; i < nRetisti; i++) {
if (OverviewAPP.listaRetiImpianti[i]["retista"]["NOME"] == this.rete)
{
OverviewAPP.listaImpianti = listaRetiImpianti[i]["listaImpianti"];
break;
}
}
is_impiantiSource = OverviewAPP.listaImpianti;
},
close: function () {
OverviewAPP.app.back();
}
};
return viewModel;
};
In the setRete function, with the line "console.log(viewModel.rete);", I see this output:
d(){if(0<arguments.length)return d.Wa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Ob(d);return c}
Why? How can I bind and read the selected value?
UPDATE: I've done in this way, it works:
setRete: function (e) {
OverviewAPP.IDrete = e.value;
var nRetisti = OverviewAPP.listaRetiImpianti.length;
for (i = 0; i < nRetisti; i++) {
if (OverviewAPP.listaRetiImpianti[i]["retista"]["NOME"] == e.value["NOME"])
{
OverviewAPP.listaImpianti = OverviewAPP.listaRetiImpianti[i]["listaImpianti"];
break;
}
}
//ko.applyBindings(viewModel);
},
But I don't know how update my second list, "is_impiantiSource".

Observables are functions. That's why you get a function in the console. Call the rete function to get its value:
viewmodel.rete();
Also see the Knockout: Observables help topic that describes this (under "Reading and writing observables").
This is how you can obtain a new value. Then, you need to update the dependent lookup data source. For this, make the is_impiantiSource property an observable array:
is_impiantiSource: ko.observableArray(OverviewAPP.listaImpianti),
After this, modify it in setRene like:
viewModel.is_impiantiSource(OverviewAPP.listaImpianti)
Also see Observable Arrays for how to work with arrays in Knockout

How can I get tagetData from pickList in PrimeUI?

I am trying to retrieve the target data from PrimeUI pickList, but with no success. Maybe someone with good knowledges in jQuery can help me. Well, I think my problem is simple. I successfully implemented the pickList from PrimeUI, but I don't know and I can't retrieve the target data from the pickList.
Well, let me show some code. My javascript looks like this:
<script>
$(document).ready(function() {
var mySourceData = [{label: 'Label 1', value: 1}, {label: 'Label 2', value: 2}];
var myTargetData = new Array();
$('#myPickList').puipicklist({
filter: true,
dragdrop: true,
filterMatchMode: 'contains',
sourceData: mySourceData,
targetData: myTargetData
});
$('#myPickListSaveButton').click(function(){
//How to retrieve #myPickList target data?
});
}
</script>
My HTML:
<div id="atividadesPicklist">
<select name="source"></select>
<select name="target"></select>
</div>
Like I wrote inside the #myPickListSaveButton function, how can I retrieve the value from targetData?
Thanks.

The plugin will move the options to the target select, meaning you can simply get the options from that select
$('#myPickListSaveButton').click(function () {
var targetData = $.map($('select[name=target] option'), function (v) {
return v.value; // maps the values and returns them in an array ["1", "2"]
});
console.log(targetData);
});
Example

Slickgrid - Change Editor of Single Cell, and not Entire Column

Here's the scenario:
There are a number of rows of selectable data
One column (#1) has dropdown editor with two options
The next column (#2) can have either a text editor, or dropdown editor - depending on the option selected in the first dropdown, see example:
_________Column #1_________|_________Column #2_________
1     select opt 1      |      *dropdown editor*    
2     select opt 1      |      *dropdown editor*    
3     select opt 1      |      *dropdown editor*    
4     select opt 2      |      *text editor*         <--- is this possible?
5     select opt 1      |      *dropdown editor*    
6     select opt 1      |      *dropdown editor*    
Is it even possible to change the editor of a single cell based on the input/change of another cell? It appears as though you can't change editors on a cell level, but only on a column level.
Any help is greatly appreciated, many hours spent on this already; and haven't found a solution or even similar question. Thanks
Update
This is getting close perhaps:
var currentRowIndex = object.grid.getActiveCell().row,
nextCellIndex = object.grid.getActiveCell().cell + 1;
object.grid.setActiveCell(currentRowIndex, nextCellIndex);
object.grid.editActiveCell(this.editors.textEditor);
But this doesn't ensure that the editor remains; for example^ a text editor. When changing the value in the first column (#1), and enabling the text editor in column #2 as above - after this edit takes place - the original editor is still in place in column #2.
I want the editor to remain the same - but can't find how to do this on a cell level rather than a column level. Thanks

Browsing the source (getEditor line 1381) pertaining to the retrieval of editors reveals a few different options are available.
column metadata
column definition
editorFactory grid option
Given that you require a different column value from within the row, I would approach the problem using the column metadata as it receives the rowIndex as an argument.
var viewModel = {options: ['LongText', 'Text', 'Checkbox']}
function apply() {
var grid, data = [];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true,
forcefitColumns: false
};
var columns = [{
id: "data",
name: "Editor Type",
field: "type",
width: 120,
cssClass: "cell-title" ,
formatter: function(row){
var key = 'input'+row;
if(!viewModel[key]){
viewModel[key] = ko.observable();
viewModel[key].subscribe(function(nv){
data[row].type = nv
})
}
setTimeout(function(){ ko.applyBindings(viewModel, document.getElementById(key)) }, 250);
return '<select id="'+key+'", data-bind="options: options, value: '+key+'"></select>'
}
},
{
id: "other",
name: "Other",
field: "other",
width: 120,
cssClass: "cell-title",
}];
for (var i = 0; i < 5; i++) {
var d = (data[i] = {});
d["type"] = "";
d["other"] = "Default " + i;
}
grid = new Slick.Grid("#myGrid", data, columns, options);
//ko.applyBindings(viewModel)
data.getItemMetadata=function(row){
var rowData = data[row]
//console.log(rowData)
var metaData = {columns:{other: {}}}
metaData.columns.other.editor = Slick.Editors[rowData.type]
return metaData
}
}
apply()
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://JLynch7.github.io/SlickGrid/slick.grid.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://JLynch7.github.io/SlickGrid/slick.dataview.js"></script>
<script src='http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.core.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.grid.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.formatters.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.editors.js'></script>
<div id='container'>
<div id="myGrid" style="width:600px;height:300px;"></div>
</div>

AngularJS Selection - setting ng-model in controller does not update selected value

I'm facing a problem in upgrading my ng-model in selection.
I have the following HTML:
<div ng-app>
<div ng-controller="Ctrl">
<select ng-model="viewmodel.inputDevice"
ng-options="i.label for i in viewmodel.inputDevices">
</select>
</div>
</div>
And the following code:
function Ctrl($scope) {
// view model
$scope.viewmodel = new function () {
var self = this;
var elem1 = {
value: '1',
label: 'input1'
};
var elem2 = {
value: '2',
label: 'input2'
}
self.inputDevices = [elem1, elem2];
self.inputDevice = {
value: '1',
label: 'input1'
};
};
}
You can use the following JSFiddle
What I want to do is put in inputDevice the same values that the first device has in the collection inputDevices.
I know that I can pass elem1 and it will work however i can't do it since i want to save the selection in Local Storage and than restore it to the ng-model object.
Any suggestion will be grateful
Thanks

You can either store the value instead of the object as Maxim has demonstrated, or you can pull the correct value from the inputDevices array with something like:
self.inputDevice = self.inputDevices.filter(function(item) {
return item.value == storedValue.value;
})[0];
as per an updated fiddle

The code in the original question works for me:
<div ng-app>
<div ng-controller="Ctrl">
<select ng-model="viewmodel.inputDevice"
ng-options="i.label for i in viewmodel.inputDevices">
</select>
<!-- displays the initial and any further selections
correctly as : {"value":"1","label":"input1"} -->
<span>{{viewmodel.inputDevice}}</span>
</div>
</div>
Your js code code works no doubt, but the viewmodel can be build a little easier:
function Ctrl($scope) {
// view model
$scope.viewmodel = {inputDevices: [
{value: '1', label: 'input1'},
{value: '2', label: 'input2'}
]};
$scope.viewmodel.inputDevice = $scope.viewmodel.inputDevices[0];
}
jsfiddle http://jsfiddle.net/8t2Ln/39/

Instead:
self.inputDevice = {
value: '1',
label: 'input1'
};
I would store index only:
self.inputDevice = 0; // or 1 - second item
and:
<select>
<option ng-repeat="i in viewmodel.inputDevices"
value="{{i.label}}"
ng-selected="viewmodel.inputDevices.indexOf(i) == viewmodel.inputDevice"
>{{i.label}}</option>
</select>
This way will work.
Fixed Demo Fiddle