I am using the Xeditable directive to have an editable form.
I have two dropdowns, and when one changes, I want to update the other. The problem is that Xeditable creates a child scope when editing the form. I cannot figure out how to set a variable within the scope of that child, so that the variable only exists in the scope of that table row.
I tried
e-ng-init="myChildVariable = 1"
Then
e-ng-change="myChildVariable =2"
But it does not seem to get updated when I trace {{myChildVariable}}.
Inside the directive, it creates this scope:
var self = this;
self.inputEl.bind('change', function() {
self.scope.$apply(function() {
self.scope.$form.$submit();
});
});
XEditable can pass the current selection from the dropdown in $data. So I tried to pass it to a function in the controller:
e-ng-change="updateVarible($data)"
but that updates the $parent scope.
I need the first select to set the variable and the second one to filter. I have the filter working, I just need to set the variable that the second one can access.
<span editable-select="user.status" e-ng-change="setVariableHereSomehow" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
<span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups | filter: useTheVariableHere">
Xeditable demo of row editing for reference:
Note: I am using 1.3 and that demo uses 1.0.8, so I can use newer filters.
When using Xeditable, how can I set a variable inside a ng-repeat that scopes to itself and not the parent?
Use e-ng-onchange:
e-ng-change="changeStatus($data,user)"
Here's a jsfiddle link of what I did. There were some modifications to the controller. For example I the groups selectio. Changing the Status to Status4 will change the group for the user.