0

I have the first group 3 buttons: line, spline and bar.

The second group: single, double and triple.

What I want to do it to make the second group buttons to be enabled or disabled depending on which one from the first group is clicked like this:

  • if line is clicked all three (single, double and triple) are enabled
  • if spline of bar is clicked only single is enabled, double and triple are disabled.

This is the array of objects I'm using (probably it could be a better way to organize it):

myList = [
    { name: 'Line', icon:'line', subList: [{ name : 'Single', icon:'a' },
                                           { name : 'Double', icon: 'b' },
                                           { name : 'Triple', icon: 'c' }]},
    { name : 'Spline', icon: 'spline', subList: [{ name: 'Single', icon:'a' }]},
    { name : 'Bar', icon: 'bar', subList: [{ name: 'Single', icon:'c' }] }
];

Here I generate the first group of buttons:

<div class="btn-group btn-group-sm">
  <i ng-repeat="view in $ctrl.myList"
     ng-class="$ctrl.isViewSet(view) ? 'btn-primary' : 'btn-default'"
     ng-click="!$ctrl.disableViews && $ctrl.setView(view)"
     ng-disabled="$ctrl.disableViews">
  </i>
</div>

This is the second one:

<div class="btn-group btn-group-sm btn-group-comparison">
  <i ng-repeat="view in $ctrl.myList[0].subList"
     class="btn yp-pulseIcon-{{view.icon}}"
     ng-click="!$ctrl.disableViews && $ctrl.setView(view)"
     ng-disabled="$ctrl.disableViews">
  </i>
</div>

I guess that on the second one I must modify something in ng-disabled but all that I've tried so far doesn't work.

Any suggestions?

Improve this question
5
  • Possible duplicate of Using ng-disabled to enable/disable button Commented Feb 7, 2018 at 13:54
  • You need to set up a plunker or fiddle as we have no idea what you have going on in the methods. But basically you need to pass in the selected view to the select method and have the disabled attribute of the second set of buttons act on the view.subList of that selected item Commented Feb 7, 2018 at 14:09
  • 1
    Is there a reason you are using ng-repeat to enumerate through the lists to generate the buttons? This would be a lot easier to do if you add each button individually in the HTML. Then you can apply certain conditions using ng-disabled directly. If you do have to do it this way, you can use a JavaScript function in your controller to handle this. Commented Feb 7, 2018 at 14:14
  • @RobynCute I think I can do it without ng-repeat but I don't know with what I must replace the <i ng-repeat> line... Commented Feb 7, 2018 at 14:19
  • 1
    @user3654571 I'm saying if you place each button individually in the HTML like: <i class="$ctrl.isViewSet('Line','line') ? 'btn-primary' : 'btn-default'" ng-click="!$ctrl.disableViews && $ctrl.setView('Line','line')" ng-disabled="$ctrl.disableViews"></i> for example for the first button (I'm guessing about your JS functions and passed the name and icon of the view instead of the view object itself) instead of enumerating through myList. You'd have an <i></i> item for each item in myList. That is essentially what ng-reat does. This is just an idea. Commented Feb 7, 2018 at 14:35
Related questions
25
How can I disable a button in AngularJS if there are elements in an array?
0
Disable button according to value in array, angularjs
1
disable and enable button in ng-repeat
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.