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