2017-11-22 10 views
0

checkboxのアプリでは、ng-ifのグラフを表示して非表示にして、&をangle-Dragulaでドラッグします。 を使用しています。私は可視のdivからIDを取得し、正確な順序でIDを配列にプッシュしてAPIに送信するためです。jquery appendとng-if not workingの場合

ユーザーが戻ってきたとき、私はAPIからの配列を取得し、私は(もちろん、彼は再び...など新しいを追加し、DIVを移動することができます)、彼が訪問する前のようにすべてのものを注文する必要が

しかしng-ifと並べ替えのようなものが配列内にあって、これが必要な場合は、ngを取り除くとソートが機能しません。

私は表示可能なDIVのIDを取るときにng-hide/ng-showを使用すると表示可能なdivのみを取得するので、常にすべてのIDを表示して表示しないので、ng-ifを使用する必要があります)

私はこの問題を解決するために、いくつかの解決策がありますng-repeat

せずにこれを使用する必要がありますか?代わりにng-ifのMabey何か? thnx

var app = angular.module('app', [ 
 
    angularDragula(angular)  
 
]); 
 

 
app.controller("appCtrl", ["$scope", "dragulaService", function($scope, dragulaService){ 
 

 
dragulaService.options($scope, "sixth-bag", { 
 
     moves: function(el, container, handle) { 
 
      return handle.className === "handle"; 
 
     } 
 
    }); 
 
     
 
    $scope.addRemoveUserChart = function(checked, value) { 
 
     //here I push and splice from array, depending on checkboxes and send to api. This code is not    necesarry for this question 
 
    }; 
 
     
 
     
 
    //function where I sort DIV by ID's 
 
    $scope.arrangeGraphs = function(){ 
 
    //var sortorder = $scope.poredakGrafova; 
 
    //this is for example 
 
    var sortorder ="power, power1,power2".split(",") 
 
      $.each(sortorder,function(index,value){ 
 
       if($.inArray(value, sortorder) != null){ 
 
        console.log(value); 
 
       $('.results').append($('#'+value)); 
 
       } 
 
      }); 
 
       
 
    } 
 
     
 
     
 
}])
.graph { 
 
background-color: red; 
 
height: 200px; 
 
} 
 
.graph1 { 
 
background-color: green; 
 
height: 200px; 
 
} 
 
.graph2 { 
 
background-color: blue; 
 
height: 200px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-dragula/1.2.8/angular-dragula.min.js"></script> 
 
<body> 
 

 
<div ng-app="app" ng-controller="appCtrl"> 
 
<div class="checkbox-inline"> 
 
    <input type="checkbox" class="checkboxShowGraph" id="graph.power" 
 
    value="power" ng-checked="power" 
 
     ng-model="power" ng-change="addRemoveUserChart(power, 'power')"> 
 
    <label for="power">Power</label> 
 
    
 
    <input type="checkbox" class="checkboxShowGraph" id="graph.power1" 
 
    value="power1" ng-checked="power1" 
 
     ng-model="power1" ng-change="addRemoveUserChart(power1, 'power1')"> 
 
    <label for="power1">Power1</label> 
 
    
 
    <input type="checkbox" class="checkboxShowGraph" id="graph.power2" 
 
    value="power2" ng-checked="power2" 
 
     ng-model="power2" ng-change="addRemoveUserChart(power2, 'power2')"> 
 
    <label for="powe2">Power2</label> 
 
    
 
    
 
    </div> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 results" id="dragulaBox" dragula='"sixth-bag"'> 
 
    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
 
    model="graphOrder" ng-if="power"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph" style="margin-bottom: 15px;"> 
 
     <span class="handle">⤭</span> 
 
    </div> 
 
    </div> 
 
     <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
 
    model="graphOrder" ng-if="power1"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph1" style="margin-bottom: 15px;"> 
 
     <span class="handle">⤭</span> 
 
    </div> 
 
    </div> 
 
     <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
 
    model="graphOrder" ng-if="power2"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph2" style="margin-bottom: 15px;"> 
 
     <span class="handle">⤭</span> 
 
    </div> 
 
    </div> 
 
    </div> 
 

 

 
</div> 
 

 
</body> 
 
</html>

+0

このdownvoteが、なぜ私は本当に面白いんですか?私はdownvoteを与えた人に、将来知っている問題を説明するように頼むだろう – Arter

答えて

1

はい、本当に痛みを照らすが、どこの角度、角度の条件があり、そこにあります。

私がやりたいことは、パラメータを取得して作業をブールとして実行するメソッドを作成することです。

<div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
    model="graphOrder" ng-if="contidionMethod()"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph2" style="margin-bottom: 15px;"> 
     <span class="handle">⤭</span> 
    </div> 

とコントローラで:多くの

$scope.contidionMethod = function(value) { 
    if(value !== null && value === otherValue) { 
     return true; 
    } else { 
     return false; 
    } 
} 

これはNG-場合、NGに隠すとNG-ショー内のメソッドを使用することができ、私の意見では、角度で最強の特徴の一つでありますより理解しやすく、扱いやすい。あなたのplunkerのscript.jsため

編集:

var app = angular.module('app', [ 
    angularDragula(angular)  
]); 

app.controller("appCtrl", ["$scope", "dragulaService", function($scope, dragulaService){ 

dragulaService.options($scope, "sixth-bag", { 
     moves: function(el, container, handle) { 
      return handle.className === "handle"; 
     } 
    }); 

    $scope.addRemoveUserChart = function(checked, value) { 
     //here I push and splice from array, depending on checkboxes and send to api. This code is not    necesarry for this question 
    }; 

    //function where I sort DIV by ID's 
    $scope.arrangeGraphs = function(){ 
    //var sortorder = $scope.poredakGrafova; 
    //this is for example 
    var sortorder ="power,power1,power2".split(",") 
      $.each(sortorder,function(index,value){ 
       if($.inArray(value, sortorder) != null){ 
        console.log(value); 
       $('.results').append($('#'+value)); 
       } 
      }); 

    } 

     $scope.contidionMethodPower = function() { 
    if(document.getElementById("graph.power").checked) { 
     return true; 
    } else { 
    return false; 
    } 
} 


     $scope.contidionMethodPower1 = function() { 
    if(document.getElementById("graph.power1").checked) { 
     return true; 
    } else { 
    return false; 
    } 
} 


     $scope.contidionMethodPower2 = function() { 
    if(document.getElementById("graph.power2").checked) { 
     return true; 
    } else { 
    return false; 
    } 
} 


}]) 

とHTML:

<!DOCTYPE html> 
<html> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-dragula/1.2.8/angular-dragula.min.js"></script> 
<link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
<body> 

<div ng-app="app" ng-controller="appCtrl"> 
<div class="checkbox-inline"> 
    <input type="checkbox" class="checkboxShowGraph" id="graph.power" 
    value="power" ng-checked="power" 
     ng-model="power" ng-change="addRemoveUserChart(power, 'power')"> 
    <label for="power">Power</label> 

    <input type="checkbox" class="checkboxShowGraph" id="graph.power1" 
    value="power1" ng-checked="power1" 
     ng-model="power1" ng-change="addRemoveUserChart(power1, 'power1')"> 
    <label for="power1">Power1</label> 

    <input type="checkbox" class="checkboxShowGraph" id="graph.power2" 
    value="power2" ng-checked="power2" 
     ng-model="power2" ng-change="addRemoveUserChart(power2, 'power2')"> 
    <label for="powe2">Power2</label> 


    </div> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 results" id="dragulaBox" dragula='"sixth-bag"'> 
    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
    model="graphOrder" ng-if="contidionMethodPower()"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph" style="margin-bottom: 15px;"> 
     <span class="handle">⤭</span> 
    </div> 
    </div> 
     <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
    model="graphOrder" ng-if="contidionMethodPower1()"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph1" style="margin-bottom: 15px;"> 
     <span class="handle">⤭</span> 
    </div> 
    </div> 
     <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2" id="power" ng- 
    model="graphOrder" ng-if="contidionMethodPower2()"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 graph2" style="margin-bottom: 15px;"> 
     <span class="handle">⤭</span> 
    </div> 
    </div> 
    </div> 


</div> 

</body> 
</html> 
+0

私はこれを実装することに問題がある。すべてのdivにng-if = "contidionMethod()"を追加します。しかし、コントローラでは、 "$ scope.contidionMethod = function(value){...}"の値は何ですか?otherValuesは何ですか?すべてのdivはIDを持っているので、そのID値を渡して、チェックされたIDを持つDIVだけを表示したり、配列からコードを表示したりする必要があります...コードをスニペットに実装できますか?これはうまくいく。 Thnx – Arter

+0

いいえ、値はあなたが内部に渡すもので(配列であれば値はデータの配列になります)、otherValueはあなたが比較した値です。例えば、 'power2'の場合です。 –

+0

あなたはhttps://plnkr.co/edit/NeIjVP7JHhqw3ZEHAlPr?p=previewと言っていますが、今は私のdivが見えません。 – Arter