文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery append和ng-如果不起作用

问jquery append和ng-如果不起作用
EN

Stack Overflow用户

提问于 2017-11-22 16:10:00

回答 1查看 698关注 0票数 1

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

当用户回来时，我从API得到一个数组，我需要像他访问之前一样对所有东西进行排序(当然，他可以再次移动div，添加新的等等……)

但是在ng-if排序不起作用的情况下，如果我删除了ng-如果所有的东西都在一个数组中，这就是我需要的。

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

我必须在没有ng-repeat的情况下使用它

有什么解决方案可以解决这个问题吗？用什么来代替ng-if？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>

javascript

jquery

html

angularjs

回答 1

Stack Overflow用户

发布于 2017-11-22 16:23:55

是的，在angular的情况下，angular是真正闪耀的地方，但也是一种痛苦。

我喜欢做的是创建一个方法，它将接受参数，并以布尔值的形式完成工作。在我看来，这是angular中最强大的特性之一，你可以在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;
  }
}

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

为柱塞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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47429654

复制

相似问题

问jquery append和ng-如果不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery append和ng-如果不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery append和ng-如果不起作用
EN