For this page: https://big.four51ordercloud.com/demo/product/customimageselector
I am trying to make one of several links that when clicked, will set the "Color" drop down to a certain value, such as "Style 1 - White" all while the "Color" drop down is hidden.
Example: Click HERE for White.
I can do this with jQuery and vanilla JavaScript just fine, but it doesn't work with AngularJS at all. The first drop down "Style" will dictate which hyperlinks are shown. That part I can do.
With that said, I am new to AngularJS.
Any advice? :-(
You can do as follows.
HTML
<button ng-click="chooseWhite()"></button>
<select ng-options="option in options" ng-model="selectedOption"></select>
Controller
$scope.options = [{ color: 'red', id: 1 }, { color: 'white', id: 2 }];
$scope.selectedOption = $scope.options[0];
$scope.chooseWhite = function () {
$scope.selectedOption = $scope.options[1];
};
Bind an object the select element and change the selected value while you click on links or buttons.
Related
I am new to Angular.js so I am not sure if this is the right approach. I have two scopes that are used to display 2 sets of buttons. The second set should be dependent on the button I click in the first set.
<!-- Insulation placement -->
$rootScope.roofs = [
{
type: 'roof',
label: 'Pitched Roof'
},
{
type: 'attic',
label: 'Floor of Attic'
}
];
<!-- Roof insulation types -->
$rootScope.roofInsulation = [
{
target: 'roof',
type: 'between_rafters',
label: 'Between Rafters'
},
{
target: 'roof',
type: 'between_rafters_counter_batten',
label: 'Between Rafters With A Counter Batten'
},
{
target: 'roof',
type: 'between_rafters_calibel',
label: 'Between Rafters With Calibel'
},
{
target: 'roof',
type: 'between_rafters_thermal_laminate',
label: 'Between Rafters With Thermal Laminate'
},
{
target: 'attic',
type: 'test',
label: 'Test'
}
];
and my HTML
<div ng-repeat="types in roofs">
<button ng-click="myFilter = {target: '{{types.type}}'}" class="btn btn-primary" type="button">{{types.label}}</button>
</div>
<div>
<button ng-repeat="variants in roofInsulation | filter: myFilter" class="btn btn-secondary" type="button">{{variants.label}}</button>
</div>
I realize that myFilter in the ng-click is a bit of a hack, but aside from that I can't get it to filter the results of ng-repeat. The myFilter variable does return the proper result {target: 'roof'} (for the first button). Do I assume correctly that it's because the first set of buttons is in a different scope than the second one?
You are not really using 2 different scopes here. If you had been using 2 different controllers or different directives then you would have got 2 different scopes. You are using $rootScope which is common across the entire angular app.
The reason myFilter is not working is because angular is unable to parse the expression in ng-click correctly, it's better you write a method (exposed to the scope) and change the value of myFilter in the method. It's a good practice as well as a better way to achieve what you are trying to do.
HTML
<button ng-click="setFilter(types)" class="btn btn-primary" type="button">{{types.label}}</button>
JS
$rootScope.setFilter = function(types) {
$rootScope.myFilter = {target: types.type};
}
Check this fiddle here, I have created a working example based on your code.
EDIT
Even if your target variable is an array there shouldn't be any issue because Anguar's pipe filter will take care of it.
I have updated and created a new fiddle to show it, check it here.
So if target is an array having 2 values - ['roof', 'attic'], that particular element will be shown for both the buttons.
Full description:
I have list of options with multiple properties (not just key-value pair):
[
{
id: 1,
name: "111",
some: "qqq"
},
{
id: 2,
name: "222",
some: "www"
}
];
And select defined as:
<select name="mySelect" id="mySelect"
ng-options="option.name for option in opts track by option.id"
ng-model="mod1"></select>
Depending on app logic, extra property may change:
{
id: 2,
name: "222",
some: "www1"
}
But actual list in Select doesn't change!
However, if name changes, then entire optionList will be refreshed.
In short you can see demo on JSFiddle OR JSFiddle. I prepared 2 very similar examples:
When button is clicked only extra property updates
When button is clicked - both extra property and key receive new value
Does anybody know solution?
UPDATE
For now I'm solving that issue with update + delay + update solution:
this.click = function(){
$scope.opts = {};
$timeout(function() {
$scope.opts = { /* NEW OBJECT */};
}, 0);
}
OK, so I think I understand what you want, which is to be able to select an option whose nested values may have changed since the list was rendered in the DOM.
Based on that understanding, I believe that the plunker I have created illustrates a solution for you. If you select one of the options, and change the child value in the input field, two-way binding will update the model.
Basically, it is taking the users selection, and on select change, re-assigning the selected object to reference the original option in the options array. This will allow two-way binding to occur. If you view the code, you will see that the input fields are updating the option list itself ($scope.options), where-as the model that is being displayed is $scope.formData.model.
https://plnkr.co/edit/DLhI7t7XBw9EbIezBCjI?p=preview
HTML
<select
name="mySelect"
id="mySelect"
ng-model="formData.model"
ng-change="onChange(formData.model)"
ng-options="option.name for option in options track by option.id"></select>
SELECTED CHILD: {{formData.model.child.name}}
<hr>
<div ng-repeat="option in options">
Child Name for {{ option.name }}: <input ng-model="option.child.name">
</div>
JS
$scope.onChange = function(option) {
angular.forEach($scope.options,function(optionItem){
if (optionItem.id == option.id){
$scope.formData.model = optionItem;
}
})
}
$scope.options = [
{
id: 1,
name: "111",
child: {
id: 11,
name: "111-1"
}
},
{
id: 2,
name: "222",
child: {
id: 22,
name: "222-1"
}
}
];
$scope.formData = {
model: $scope.options[0]
};
Call $apply whenever you want to apply changes made.
$scope.$apply();
This will tell AngularJS to refresh.
I have a kendo ui dropdownlist with angularjs in my html:
<select kendo-drop-down-list="dropdownlistCatalogs" k-options="optionsDropDownListCatalogs" data-role="dropdownlist" style="display: none;">
<option value="2" selected="selected">Test1</option>
<option value="3">Test2</option>
<option value="4">Test3</option>
</select>
In the angularjs controller, everytime i click on an item in the dropdownlist, i call this function to remove the selected item from the dropdown control:
function removeItemFromDropDown(e) {
var index = e.item.index();
var selectedItem = $scope.dropdownlistCatalogs.dataItem(e.item.index());
$scope.optionsDropDownListCatalogs.dataSource.remove(selectedItem);
}
Now, i want set the selected option to non existing item to show an empty value.
I have tried with:
$scope.dropdownlistCatalogs.value(-1);
but not working
How can i set the dropdownlist by value()?
I'm not sure much about angularjs and if things are different. I see $scope in there which I guess is of angular, since i dont see it defined anywhere. But Usually value will help you with this if using jquery
Add a default blank value at the top with id:-1 and set the default value as 1.
On click of a button, you can change the value to -1
It would look like this :
var data = [
{ "text": "" , id: -1 },
{ "text": "aaa",id: 1 },
{ "text": "bbb",id: 2 },
{ "text": "ccc", id:3}
];
$("#ddl").kendoDropDownList({
dataTextField: "text",
dataValueField: "id",
dataSource: data,
index: 3
});
$("#button").on("click", function () {
var dropdownlist = $("#ddl").data("kendoDropDownList");
dropdownlist.value(-1);
});
Here is an working example
I have a array opts with the different options for a <select> element. Array's objects have a property text for display and a property value for get the value and set in a variable $scope.opt2.
Controller:
function MyCtrl($scope) {
$scope.opts = [
{value: 10, text: '1st' },
{value: 20, text: '2nd' }
];
}
I want set:
$scope.opt2 = {ref: 10} and show 1st when the first option is selected
$scope.opt2 = {ref: 20} and show 2nd when the second option is selected
I tried:
<select ng-model="opt2" ng-options="{ref: obj.value} as obj.text for obj in opts">
The value sets correctly but the text is not show. Any solution?
Examples for testing: http://codepen.io/ces/pen/azbLzX
While Philipps response will work, it's a little more complicated then you need it to be, change your select to this:
<select ng-model="opt2.ref" ng-options="obj.value as obj.text for obj in opts">
See the edited codepen here: http://codepen.io/anon/pen/XJWeVQ
I want to have menu in a button as drop-down without the key "text" in ext js 4. I have an array with me with the required field to be shown in button. And I am associating this array in the menu option programatically. But this array does not have "text" as its column. Please help. Regards,
Ranjeet Kanth
Ext.create('Ext.button.Button', {
x: 5,
y: 5,
text: 'Add Language',
showText: true,
width: 120,
menu : menu1 });
var menu1 = {
items: [{entryName:'English'},{entryName:'English(US)'}]
};
I think you're using the wrong component... you should be using a split button:
Ext.create('Ext.button.split', { ... });