How to reduce if conditions in angularjs?

Question

I have 8 icons like this

each icon have different functionality. Multiple icons can also click, that have call different functions.

this is just an eg but I have to do something else.I need to know how I can give a proper if condition for this functionality

now I am doing the following way

html code first 2 icons

<input value="1" type="checkbox" name="function[]" id="checkbox_vs1" ng-model="selection[1]"  ng-change="onFChange()"/>

and in controller

$scope.onFChange = function()
{
     if(this.selection[1] == true && this.selection[2] == false && this.selection[3] == false && this.selection[4] == false && this.selection[5] == false && this.selection[6] == false && this.selection[7] == false && this.selection[6] == false)
             {
                 //call function
             }
}

Like this I have to check all the combination is there any simple way i can implement this

Here is the plunker https://plnkr.co/edit/HNqc2GaQFgoMwhO5S9Ot link

So this will have 40320 if conditions. I need to reduce this

Thank you

Take a look at http://stackoverflow.com/questions/5752002/find-all-possible-subset-combos-in-an-array — Naruto, Mar 30 '16 at 07:01
If I understand you correctly. You will have alot of **if** statements like this and you are trying to reduce that? **Switch**? or **while/do** ? — izk, Mar 30 '16 at 07:26
Pass an argument into the function from view so you know which one is which — charlietfl, Mar 30 '16 at 10:55
As you make these conditions **40320**? They are recorded somewhere in the database? They then generates a script? Or written in javascript file manually? — Stepan Kasyanenko, Mar 31 '16 at 03:57

shammelburg · Answer 1 · 2016-03-30T07:44:59.863

0

Is this what you mean?

$scope.onFChange = function()
{
     if(this.selection[1] && !this.selection[2] && !this.selection[3] && !this.selection[4] && !this.selection[5] && !this.selection[6] && !this.selection[7] && !this.selection[6])
     {
         //call function
     }
}

This is using truthy's.

EDIT

$scope.onFChange = function()
{
     var s1 = selection[1];
     var s2 = selection[2];
     var s3 = selection[3];
     var s4 = selection[4];
     var s5 = selection[5];
     var s6 = selection[6];
     var s7 = selection[7];
     var s8 = selection[8];

     // Condition 1
     if(s1 && !s2 && !s3 && !s4 && !s5 && !s6 && !s7 && !s8)
     {
         //call function
     }
}

This would make it easier to write out your conditions.

edited Mar 30 '16 at 07:44

answered Mar 30 '16 at 07:24

shammelburg

6,974
7
26
34

won't this still make him use 8 if statements? because for every selection = true he probably has an if – izk Mar 30 '16 at 07:29
Depending on your combinations, you will have to write the IF statement. You can simplify the code more but if you are checking for multiple conditions I can't see a way around it. – shammelburg Mar 30 '16 at 07:39

score 0 · Answer 2 · answered Mar 30 '16 at 07:31

0

You can make generic functions for this for example for this

     if(this.selection[1] && !this.selection[2] && !this.selection[3] &&  !this.selection[4] && !this.selection[5] && !this.selection[6] &&   !this.selection[7] && !this.selection[6])
     {
     //call function
     }
     //Code for above function 


     function checkCondition(index,this.selection)
     {
        if(!this.selection[index])
         {
            return false;
         }
      for(var i=1;i<this.selection.length;i++)
       {
         if(this.selection[i]&&i!=index)
          {
                return false;

           }

       }
            return true;

     }

Note this is a rough idea for helping you in making approach

answered Mar 30 '16 at 07:31

Hassan Tariq

730
7
15

but for each condition I have to call different functions – user1187 Mar 30 '16 at 07:36
actually this will shorten your code in my approach you have to write this condition only one time not for as many time as you are doing in your current approach – Hassan Tariq Mar 30 '16 at 07:38
if i have selected multiple how can i implement this – user1187 Mar 30 '16 at 07:39
you ll have to make 3 different function in accordion to meetup and two items checked at time three items checked at time but it will certainly reduce your code for writing conditions – Hassan Tariq Mar 30 '16 at 07:42
actually there is not any built in function or property of angular js/javascript by which you can achieve this you ll have to write this code by loops and functions – Hassan Tariq Mar 30 '16 at 07:43

score 0 · Answer 3 · answered Mar 30 '16 at 07:32

0

Create a function that loops through selection to check if any of the other values are true. Example:

Html:

<input value="1" type="checkbox" name="function[]" id="checkbox_vs1" ng-model="selection[1]"  ng-change="onFChange(1)"/>

Controller:

$scope.onFChange = function(checkedBoxNumber)
{
     if(checkSelection(checkedBoxNumber))
     {
         // Do stuff
     }
}

function checkSelection(checkedBoxNumber) {
    for (var i = 0; i < selection.length; i++) {
        // Check values
        // Return false if other values are true
    }
    return true;
}

answered Mar 30 '16 at 07:32

carlcheel

621
6
11

multiple check box also i can select. each combination I have to call different functions – user1187 Mar 30 '16 at 07:38
Could you provide a code example in Plunker or something similar? – carlcheel Mar 30 '16 at 08:08
I have added the plunker you can check the link – user1187 Mar 30 '16 at 09:04
Great. What are you actually doing when these are checked? I could provide code to streamline your alert example but it might not help you in your actual scenario. – carlcheel Mar 30 '16 at 09:38
each combination I have to call different function – user1187 Mar 30 '16 at 09:40
If you are doing something **completely** different per combination, then although you could simply the if block, you'd still need an if block for each combination. If there's something common between them (e.g. box 1 always calls a particular function and box 3 always calls a particular function) then you could simplify it. – carlcheel Mar 30 '16 at 09:48
but 1 and 3 both click will call a different function – user1187 Mar 30 '16 at 09:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107712/discussion-between-carlos13-and-athi). – carlcheel Mar 30 '16 at 10:02

How to reduce if conditions in angularjs?

3 Answers3