Currently I am facing this issue
I have this array and this select html
$ctrl.languages =
[
{
key: 'Play Prompt',
value: 'blank'
},
{
key: 'Dont Play Prompt - Assume English',
value: 'English'
},
{
key: 'Dont Play Prompt - Assume Spanish',
value: 'Spanish'
}
];
<select class="form-control" name="vdn" ng-model="$ctrl.ivr.Language"
ng-options="item.value as item.key for item in $ctrl.languages" ng-required="true">
</select>
I use that dropdown to show the key in the current dropdown for each option, and I save the "value" property of the option selected in a database but when I retrieve the data the option with the "value" ssaved is not selected.
In this case if I save 'blank' value in the database I want the dropdown to have the 'Play Prompt' key selected.
Thanks
This looks pretty straightforward.
I've provided a working plunker here: https://plnkr.co/edit/sCusyXaSJdO0sjgm3csE?p=preview
Let me know if you were looking for something else.
In my code, I've added a timeout to simulate a web service call.
Here is the controller code from the plunker:
app.controller('mainController', function($scope, $timeout) {
$scope.languages = [
{
key: 'Play Prompt',
value: 'blank'
},
{
key: 'Dont Play Prompt - Assume English',
value: 'English'
},
{
key: 'Dont Play Prompt - Assume Spanish',
value: 'Spanish'
}
];
$scope.ivr = {};
// Simulating Web service Call
$scope.retrievingData = true;
$timeout(function() {
$scope.ivr.Language = 'blank';
$scope.retrievingData = false;
}, 2000);
});
You're setting up item.value as the value that gets set to $ctrl.ivr.Language whenever an option is selected from the dropdown. Since the <select>'s ngModel directive is pointing to $ctrl.ivr.Language, setting a value to $ctrl.ivr.Language within the controller will automatically add selected="selectd" to the item in the dropdown that has a value property that has a matching value.
Therefore, if you want "Play Prompt" to be the value that is selected in the dropdown when the database doesn't contain a value for that setting, then you can check whether the value exists in the API response, and if it doesn't, then set $ctrl.ivr.Language = 'blank' to default to the "Play Prompt" option.
Related
I am trying to properly set a series of SELECT objects that are dynamically created in angular. The server returns an array of objects that I create these dropdowns from.
What I'd like to do is, for every dropdown created, assign the default selected value (as in, set ng-selected) based on the value of the object's value (labelled 'package')
The function changeValue changes the data on the server successfully.
Here is the code so far:
<!-- HTML -->
<div ng-repeat="package in bucket.packages">
<select ng-options='option.value as option.name for option in sources' ng-change="changeValue('source', package.id, selection)" ng-model="selection"></select>
</div>
//js
$scope.sources = [
{name: 'License Source'},
{name: 'Project Website', value: 'projectWebsite'},
{name: 'File', value: 'file'},
{name: 'Expected License', value: 'expectedLicense'}
];
$scope.optionMatches = function (selection, option){
return selection === option.value;
};
//not sure where to put this
ng-selected="optionMatches(package, option)"
I have a multiselect field in angular-formly, with the following options:
vm.fields = [
{
key: 'fruits',
type: 'multiCheckbox',
className: 'multi-check',
templateOptions: {
label: 'Fruits:',
options: [
{
"name": "ALL",
"value":"ALL"
},
{
"name": "apple",
"value":"apple"
},
{
"name": "orange",
"value":"orange"
},
{
"name": "pear",
"value":"pear"
},
{
"name": "blueberry",
"value":"blueberry"
},
],
},
},
];
When I select/unselect "ALL", I want all the options to be selected/unselected.
For Example. If ALL is checked, then all the fruits options( apple, orange, pear, blueberry) should be checked as well
If I unselect ALL, then none of the fruit options should be checked.
How do I enable this behavior in angular-formly?
Here is the link to jsbin:
https://jsbin.com/xololi/edit?html,js,output
I wrote a working example here https://jsbin.com/dukewac/6/edit?js,output
The signature of templateOptions.onClick when a function is $modelValue, fieldOptions, scope, event. This occurs when the ngModelAttrsTemplateManipulator is run. I leveraged these variables in my function.
Some of it is a bit hacky but that partially has to do with how angular implements checkboxes and the workarounds that the multiCheckbox type in angular-formly-templates-bootstrap employs.
Gotchas
Nested Keys
This example will not work with nested keys but should if the multiCheckbox type was updated. This is because it is directly accessing the model using array access notation [see the code here] (https://github.com/formly-js/angular-formly-templates-bootstrap/blob/a69d69e5c3f6382ea6a6c028c1d8bf76a9b94db3/src/types/multiCheckbox.js).
Hardcoded "all" option
The code also assumes that the 'ALL' option is the first in the list and that its value is 'ALL'. This could be fixed by adding a templateOption property that references what the index and value the all functionality is for.
Model contains 'ALL'
'ALL' will appear in your model. A possible way to get around this would be to define a $parser for it.
No support for templateOptions.valueProp
templateOptions.valueProp is not taken into account but shouldn;t be too difficult to add.
Do you have any solution how to add defaultValue to multiCheckbox. I can add it and see it in model but on view (html) it is not displayed.
I'we made example on jsbin where I have all types of fields and also multiCheckbox... jsbin example
Thanks.
here is another working solution (actually updated ckniffty's code), which binds ng-click to formly multi checkbox field and then calls function in controller:
....
ngModelElAttrs: {
"ng-click": "update(this.option.value)"
},
controller: function ($scope) {
$scope.update = function (val) {
var all = 'ALL',
// field key
key = $scope.options.key,
// if true - current checkbox is selected, otherwise - unselected
selected = $scope.model[key].indexOf(val) !== -1,
// index of 'ALL' checkbox within model array
indexOfAll = $scope.model[key].indexOf(all);
// 'ALL' checkbox clicked
if (val === all) {
// on select - select all checkboxes, on unselect - unselect all checkboxes
$scope.options.value(selected ? $scope.to.options.map(function (option) {
return option.value;
}) : []);
}
// other then 'ALL' checkbox unselected, while 'ALL' is selected
else if (!selected && indexOfAll !== -1) {
// unselect 'ALL' checkbox
$scope.model[key].splice(indexOfAll, 1);
}
// all checkboxes selected except of 'ALL'
else if (selected && indexOfAll === -1 && $scope.model[key].length === $scope.to.options.length - 1) {
// select 'ALL' checkbox
$scope.model[key].push(all);
}
};
}
.....
plunker: https://plnkr.co/edit/LWRZSS6HuBmrzSG5fsH9
I have an onyx.Picker which before selection displays a "Click to Select" button prompting the user for action. As is the expected behavior, once the user picks an option, they can not revert back to the "Click to Select" display. However, I need to be able to programmatically reset the form, in which case, the picker should once again revert to it's original state.
I have figured out that I can remove the picked option by calling this.$.PickerName.setSelected(null) However, the UI does not revert back to the "Click to Select" display as would be expected. How can I reset the picker completely?
Fiddle : http://jsfiddle.net/trex005/2amLu1r4/
As far as i am aware, setSelected() on the picker expects you to pass it a reference to the control (picker's clientControls) which you want to set dynamically ,so passing null will do nothing. Once an item is selected, the list of items closes, but the item stays selected and the pickerButton displays the choice that was made. So, all you have to do is this. this.$.pickerButton.setContent('Click to Select'); which will reset the pickerButton content.
http://jsfiddle.net/scrs3Le5/1/
enyo.create({
components: [{
kind: "onyx.PickerDecorator",
name: "DecoratorName",
components: [{
name:'pickerButton',
style: 'min-height:2.5rem;min-width:330px;',
content: "Click to Select"
}, {
kind: 'onyx.Picker',
name: 'PickerName',
components: [
{content: "Is broken"},
{content: "Is not cool"},
{content: "Is very very very very very very very cool!"}
]
}]
}, {
kind: 'Button',
ontap: 'ResetPicker',
content: 'ResetPicker'
}],
ResetPicker: function () {
//this.$.PickerName.setSelected(null);
this.$.pickerButton.setContent('Click to Select');
},
rendered: function () {
this.inherited(arguments);
}
}).renderInto(document.body);
Hope that helps!
I have the following situation:
A list of indicators, each of them having the properties name, description, essential and differential.
$scope.indicators = [
{ name: 'indicator1' , description: 'blah1', essential: true, differential: false },
{ name: 'indicator2' , description: 'blah2', essential: false, differential: true },
{ name: 'indicator3' , description: 'blah3', essential: true, differential: true },
{ name: 'indicator4' , description: 'blah4', essential: false, differential: false }
]
I'd like to be able to filter with a select the following combinations:
"All", "Essential", "Differential", "Essential and Differential", "Neither Essential nor Differential"
I have tried using ng-model in the select associated with the ng-repeat with | filter, but that ruined the pagination.
I couldn't think of way of using the st-search directive since I'm filtering two properties combined.
Does anyone have a suggestion?
Follows the plunker with the sample code: http://plnkr.co/edit/t9kwNUjyJ15CbLFFbnHb
Thanks!!
The search are cumulative, so if you call the controller api search with multiple you will be able to add the predicates.
Just make sure to reset the sortPredicate object whenever the value changes.
this plunker shows how to write a plugin with your requirements (although I don't understand what all would be in this context
.directive('customSearch',function(){
return {
restrict:'E',
require:'^stTable',
templateUrl:'template.html',
scope:true,
link:function(scope, element, attr, ctrl){
var tableState=ctrl.tableState();
scope.$watch('filterValue',function(value){
if(value){
//reset
tableState.search.predicateObject ={};
if(value==='essential'){
ctrl.search('true', 'essential');
} else if(value === 'differential'){
ctrl.search('true', 'differential')
} else if(value === 'both'){
ctrl.search('true','essential');
ctrl.search('true', 'differential');
} else if(value === 'neither'){
ctrl.search('false','essential');
ctrl.search('false', 'differential');
}
}
})
}
};});
This is how I would do it.
In your controller define an Array with the possible options and the filter for each option, like this:
$scope.options = [
{value:'All', filter:{}},
{value:'Essential', filter:{essential:true}},
{value:'Differential', filter:{differential:true}},
{value:'Essential and Differential', filter:{differential:true, essential:true}},
{value:'Neither Essential nor Differential', filter:{differential:false, essential:false}}
];
Then in your html declare your select using this array, like this:
<select ng-model='diffEssFilter' ng-options='option.value for option in options'>
</select>
And then in your ng-repeat use the filter that would be stored in diffEssFilter, like this:
<tr ng-repeat="indicator in indicators | filter:diffEssFilter.filter">
That's it.
Working example
I use object ITEMS to hold data
$scope.items = [
{value:'title1', text: 'head1',
value:'title2', text: 'head2',
value:'title3', text: 'head3' }
];
When I clicked 'Add option' button I need show 'value' and 'text' in HTML page:
$scope.items.push(
{
value: 'value1',
text: 'text1'
}
);
I can show object length, but I can't show added option.
And $watch ($watchCollection) doesn't work too.
In this example I don't get values from inputs.
enter link description here
Your $scope.items array is improperly declared. You need braces around each separate item in the array, like this:
$scope.items = [
{value:'title1', text: 'head1'},
{value:'title2', text: 'head2'},
{value:'title3', text: 'head3'}
];
Your directive is all kinds of messed up. You don't even need to create a new directive if all you want to do is display the items in a list. You can just do this:
<select ng-model="selectedItem" ng-options="item.text for item in items"></select>
Your textboxes are ok, except for the typo in the ng-model="addoText". Your labels below should be bound to the same variables as the textboxes.
key: {{addVal}} <br>and value: {{addText}}
That will update the labels as you type in the textboxes. If you don't want to update the labels until you add a new item, then bind them to some new variables, like this:
key: {{newVal}} <br>and value: {{newText}}
Finally, your add() function should look like this:
$scope.add = function () {
$scope.items.push(
{
value: $scope.addVal,
text: $scope.addText
}
);
$scope.newVal = $scope.addVal;
$scope.newText = $scope.addText;
};
This pushes the new item to the array, and sets the bindings on your labels to the new values. You don't need to $watch anything.
Here's a Plunker.
There is an issue with how your items array looks at the moment.
I think your $scope.items should look like:
$scope.items = [
{
value: "value1",
text: "text1"
},
{
value: "value2",
text: "text2"
}
]
rather than all in one object, as when you push you'll create a new object.
With your question, calling items.value, will result in an undefined.
You need to call an object in $scope.items. Calling items[$scope.items.length-1] will get the most recent object added, and such items[$scope.items.length-1].value and items[$scope.items.length-1].text the values in that object