2016-09-23 7 views
0

私が取り組んでいるプロジェクトでは、すべてがアクティブ状態と非アクティブ状態の21個のボタンがあります。特定のボタンの状態は、他のボタンが押され、そのボタンが押されたことによっても影響されます。私のHTMLでは、特定のボタンを有効または無効にするには、関数updateActiveButtons(num)を呼び出すためにng-clickを使用します。このJavaScriptのロジックコードをより効率的/コンパクトな方法で書く方法はありますか?

私が考えることができる最も良い方法は、21個の要素の配列を使用することでした。これらの要素はすべてデフォルトでfalseに設定され、押されたときに変更されました。

問題は、私のコードが醜いことであり、ロジックを改善するにはもっと良い方法があることがわかっています。私は非常によくやったか、プロ感じない方法で出てくる繰り返されるコードの多くを持っている

/* Array for active buttons 
0: Company Name 1: Country 2: Industry 3: Search 4: Company Name - Seller Name 5: Company Name - Buyer Name 6: Country - USA 7: Country - China 8: Country - Israel 
9: Country - Russia 10: Country - India 11: Country - Japan 12: Industry - Tech 13: Industry - Consumer 14: Industry - Pharma 15: Industry - Financial 16: Industry - Biotech 17: Industry - Industrial 
18: Date 19: Valuation 20: Industry - Business 
*/ 
$scope.activeButtonArray = new Array(21); 
for (var i = 0; i < $scope.activeButtonArray.length; i++) { $scope.activeButtonArray[i] = false; } 
//pos = position in array 
$scope.updateActiveButtons = function(pos) { 
    console.log($scope.activeButtonArray[20]); 
    if(pos != 0 || pos != 1 || pos != 2 || pos != 3 || pos != 4 || pos != 5) { 
     $scope.activeButtonArray[pos] = !$scope.activeButtonArray[pos]; 
    } else if(pos == 3 && !$scope.activeButtonArray[pos]) { 
     $scope.activeButtonArray[pos] = true; 
    } else if(pos == 3 && $scope.activeButtonArray[pos]) { 
     $scope.activeButtonArray[pos] = false; 
    } 
    if(pos == 18 || pos == 19) { 
     $scope.activeButtonArray[0] = false; 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
    } 
    if(pos == 0) { 
     $scope.activeButtonArray[0] = true; 
     if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) { 
      $scope.activeButtonArray[0] = true; 
     } 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
     if($scope.search.text == undefined || $scope.search.text == '') { 
      $scope.activeButtonArray[3] = false; 
     } 
    } 
    if(pos == 1) { 
     if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) { 
      $scope.activeButtonArray[0] = false; 
     } 
     if($scope.activeButtonArray[6] == true || $scope.activeButtonArray[7] == true || $scope.activeButtonArray[8] == true || $scope.activeButtonArray[9] == true || $scope.activeButtonArray[10] == true || $scope.activeButtonArray[11] == true) { 
      $scope.activeButtonArray[1] = true; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
     if($scope.search.text == undefined || $scope.search.text == '') { 
      $scope.activeButtonArray[3] = false; 
     } 
    } 
    if(pos == 2) { 
     if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) { 
      $scope.activeButtonArray[0] = false; 
     } 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == true || $scope.activeButtonArray[13] == true || $scope.activeButtonArray[14] == true || $scope.activeButtonArray[15] == true || $scope.activeButtonArray[16] == true || $scope.activeButtonArray[17] == true || $scope.activeButtonArray[20] == true) { 
      $scope.activeButtonArray[2] = true; 
     } 
     if($scope.search.text == undefined || $scope.search.text == '') { 
      $scope.activeButtonArray[3] = false; 
     } 
    } 
    if(pos == 3) { 
     if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) { 
      $scope.activeButtonArray[0] = false; 
     } 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
    } 
    if(pos == 4) { 
     $scope.activeButtonArray[4] = true; 
     $scope.activeButtonArray[5] = false; 
    } 
    if(pos == 5) { 
     $scope.activeButtonArray[4] = false; 
     $scope.activeButtonArray[5] = true; 
    } 
} 

は、ここに私のupdateActiveButtons機能です。私はこれをクライアントに送ることを誇りに思いません。どのように私はこれをより良いものにすることができるかについて誰にも示唆がありますか?途中

+4

私が投票していますそれがhttp://codereview.stackexchange.comに属しているので、この質問をトピック外として閉じるには – vol7ron

答えて

0

そう

if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) { 
     $scope.activeButtonArray[0] = true; 
    } 

if (somethingIsSomething($scope)) 

になる方法/機能によって全条件(またはブロック)を交換することであろうこの有することがはるかに自己の付加的な利点あなたがやっていることを "読む"ことができるように文書化する。

+0

あなたが言っていることを見ています。私は、配列を取る関数と、配列の開始点と終了点の考え方が好きです。 1つ以上がtrueの場合はtrueを返し、falseの場合はfalseを返します。 –

+0

ええ、すべて真か偽かの範囲を常にチェックしたい場合は、 – pixelearth

+0

私は実際には単一のものが本当であるかどうかをチェックしたいと考えましたが、コンセプトは同じで、私の答えに導いてくれました。ありがとうございました。私は答えとして何をしたのかを掲載するつもりですが、あなたが私にそれを導いてくれたので、私は正しいものとしてあなたの印をつけます。 –

0

私はそうしたように、pixelearthさんから別の機能を作成することをお勧めしました。

パラメータとして配列、開始点、終了点をとる関数を作成し、その範囲の配列値のいずれかがtrueの場合はtrueを返すことにしました。ここで

は関数である。

var arrayContainsTrue = function(arr, start, end) { 
    for(var i = start; i <= end; i++) { 
     if(arr[i] == true) { 
      return true; 
     } 
    } 
    return false; 
} 

、その後、私のコードを短くするために私は(必要に応じたものに基づいて異なる開始点と終了点で)これをしなかった:

if(!arrayContainsTrue($scope.activeButtonArray, 6, 11)) 
関連する問題