AngularJS issue with ng-click and 2 expressions inside, only one fires - angularjs

I have an issue, in a ng-click I have 2 expressions, and only one fires.
If I use only one expression at a time, they both work, but together they dont.
One is a function, and one is a simple: button = !button ; which I use to trigger the button state.
All of this is inside a ng-repeat, so I'll get multiple buttons, and each has to have its own state.
What I saw is that if instead of doing: button = !button which will only work alone, but not together with the function ( so ng-click= "func(); button = !button" won't fire the second expression).
but If I declare a simple bool in the controller like this:
button: boolean;
this.button = false;
then use: ng-click= "func(); $scope.button = !$scope.button"
It will fire both expression correctly, but the issue here is that I'm using a ng-repeat, so if 10buttons get generated, when you click one, with this solution, all the 10 buttons will get triggered because they are using the same bool.
So to avoid adding a new property on my list of objects that I loop over, just for the button state, is there a simpler solution?
I don't even understand why using a declared boolean in the controller would work, and using a simple: var = !var in the view won't.
I tried using instead a dummy function, with just a console.log return and it works, so it has also probably something to do with my function, but yet again, why would it work with a declared bool and not with a direct expression in the view?
the function is a bit long and calls other functions inside it, so for the purpose of my question I don't think it's relevant posting it and making a fiddle would also be complicated as the function takes data directly from the API.
But the important thing is that the function works correctly and it's used in multiple places in the project.
Thank you

You can try like the below code which will let you do what you are looking for, also please check this plunker for your example scenario.
Template:
<div ng-repeat="btn in buttonList">
<button type="button" value="btn.value" ng-click="func();btn.button=!btn.button" ng-disabled="btn.button">{{btn.name}}</button>
</div>
Controller:
$scope.buttonList = [{
name: 'World1',
value: 1
}, {
name: 'World2',
value: 2
}, {
name: 'World3',
value: 3
}, {
name: 'World4',
value: 4
}, {
name: 'World5',
value: 5
}, {
name: 'World6',
value: 6
}, {
name: 'World7',
value: 7
}, {
name: 'World8',
value: 8
}];

Related

Ng-click filter between 2 scopes

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.

How to add an if-clause using $scope derived from AngularJS in JSON-data?

Being a newbie in AngularJS and JSON, I have the following JSON-code:
{
key: 'EI',
value: 'Eingepasst',
rate: Settings.get('partnerRate'),
variants:
[
{ key: 'E0', value: 'Regulär', multiplier: 1, rate: Settings.get('partnerRate') }
]
},
However it should only be "used" in case a specific variable in AngularJS-code (to be detailed $.scope.something) gets a specific value.
How can I add such an if-clause herein (if possible)?
You can use ng-if in your html where you are binding your json data.
So let's say you have a div that is bound to some of the properties on your model, you can wrap that all in a div that has ng-if on it as follows:
<div ng-if="something === expectedValue">
<div>{{obj.rate}}</div>
<div>{{obj.value}}</div>
</div>
This is a pretty primitive example, but if you have "something" defined on your $scope it should work.

Extending UI-Router-Tabs To Display Form Validation State

I'm pretty new to Angular and having a problem figuring out how to bind a value from a data service to a customization of the https://github.com/rpocklin/ui-router-tabs project that I have created.
The customization is to display an icon in the tab heading that toggles based on the validation state of the corresponding ui-view. I've wired up a data service that is updated when validation succeeds or fails, and the binding is being "seen" by the controller that renders the tabs.
The problem arises when I attempt to pass this value into the tab data as "options". The value change/icon toggle is not being processed as the validation state changes. If I pass a hard-coded "true" into the tab data, the desired icon is displayed.
vm.tabs = [
{
heading: "View 1",
route: "manage.view1",
options: {
status: vm.stateService.getForm1State()
}
},
{
heading: "View 2",
disable: vm.disableTabs,
route: "manage.view2",
options:{
status: true
}
}
];
This doesn't seem like something that should be that difficult, so I think I'm just missing something obvious about the scoping. Here is a plunk http://plnkr.co/edit/iefvwcffSZmpfy83NGde?p=preview that demonstrates the issue.
Note: should be tagged as ui-router-tabs, but I lack the reputation to create the tag.
The problem lies here:
options: {
status: vm.stateService.getForm1State()
}
Since stateService.getForm1State() returns a boolean value, this value will be copied and assigned as the value of the status property.
So when this code has executed once it will for example be:
options: {
status: false
}
The options object won't react to any changes within the stateService.
An easy solution is to have stateService.getForm1State() return an object instead.
For example:
function stateService() {
var form1IsValid = {
status: false
};
return {
getForm1State: getForm1State,
setForm1State: setForm1State
};
function getForm1State() {
return form1IsValid;
}
function setForm1State(newValue) {
form1IsValid.status = newValue;
return;
}
Then make the options object refer to the same object:
options: vm.stateService.getForm1State()
Now whenever you have:
options.status
It will be the same as:
vm.stateService.getForm1State().status
And it will correctly reflect the changes.
Demo: http://plnkr.co/edit/KjXVSSMJbLw7uod0ac6O?p=preview

extjs dom.value

setValue : function(text) {
Ext.get('id').dom.value = text;
console.log(Ext.get('id').dom.value);
}
This piece of code sometimes stops working. My input is result of UI interaction. After setting the text several times value is not visually updated. console.log() always returns the correct result.
Any ideas how to visually refresh the element or what might cause the problem?
DOM manipulation is not a good way, always try to solve issues in framework level.Try like the following
Ext.getComponet('id').setValue(text);
Ext.get is not recommended if you have a big form as it will have to got through all objects looking for your Id.
Instead you can user code like below
nameTextBox= new Ext.form.TextField({
xtype: "textfield",
fieldLabel: 'Name ',
id: 'txtName',
name: Name',
allowBlank: false
})
And then use your set function
setValue : function(text) {
nameTextBox.value = text;
console.log(nameTextBox.value);
}
Ext.get('id').setValue('text');
[notes]
Ext.get() returns an Ext.Element, which has a set method for setting various attributes for a HTMLElement.

Trying to use value in togglefield by calling the controller

is there a way to receive some return value from a controller like
app.controllers.theController = new Ext.Controller({
...
getPrefsData: function(options){
//console.log("#getPrefsData: " + options.datastring);
return options.datastring;
},
...
to use it inside a panel-item:
app.views.PrefsView = Ext.extend(Ext.Panel, {
...
items: [
xtype: 'togglefield',
name: 'enableThis',
label: 'Enabler',
value : HERE I NEED THE VALUE FROM THE CONTROLLER,
]
something like
value: Ext.dispatch({
controller: app.controllers.clockcontroller,
action: 'getPrefsData',
datastring:'alarm'
});
doesn't work...
Maybe this will help;
In my application I needed to use somekind of session variable when switching between panels. A user selects an item in a list, and in the next panel I want to know what the ID was of the selected item.
Getting a return value from the controller (/function) didn't work out for me.
Instead I used:
Ext.apply(panel, {
testVariabele: index,
}),
This piece of code allowed me to set a 'global' variable ("panel" is the ID of my main panel) inside the function (controller). To access the variable in another panel or card you can now use:
panel.testVariabele;

Resources