jquery追加和ng-if不工作

时间：2017-11-22 08:10:00

标签： javascript jquery html angularjs

在我的checkbox应用中，我使用ng-if显示和隐藏图表，并使用angular-Dragula拖放。 我使用ng-if因为，我从可见的div获取ID，并按照确切的顺序将ID推送到数组并发送到API。

当用户回来时，我从API获取一个数组，我需要在他访问之前订购所有内容（当然，他再次可以移动div，添加新的等等...）

但ng-if排序不起作用，如果我删除ng - 如果所有内容都像数组一样，这就是我需要的。

我需要使用ng-if，因为当我获取可见DIV的ID时，如果我只获得可见的div，如果我使用ng-hide / ng-show我总是获得所有ID（可见并且不可见）

我必须在没有ng-repeat

的情况下使用此功能

有没有解决方法？ Mabey而不是ng-if？日Thnx

＆＃13;
＆＃13; 
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));
                 }
             });
             
     }
     
     
}])
＆＃13; 
.graph {
background-color: red;
height: 200px;
}
.graph1 {
background-color: green;
height: 200px;
}
.graph2 {
background-color: blue;
height: 200px;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

是的，棱角分明的状态是棱角分明，但也是疼痛。

我喜欢做的是创建一个方法，它将获取参数并以布尔值的方式完成工作。在我看来，这是角度最强的功能之一，你可以使用ng-if，ng-hide和ng-show中的方法：

  <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;
  }
}

更容易理解，更容易处理。

编辑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>
相关问题
最新问题