Question

我的剧本有问题。

JS

   $scope.showConfirm = function(e) {
     var confirmPopup = $ionicPopup.confirm({
       title: 'some title',
       template: 'ccccccc'
     });
     confirmPopup.then(function(res) {
       if(res) {
          var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
          console.log(a);
       }
     });
   };

和html：

<div class="green" data-id="{{mydiv.mydiv_id}}">
<p>some text </p>

    <button class="button button-primary" ng-click="showConfirm({{mydiv.mydiv_id}})">
      Wykonane
    </button>
  </div>

一切正常，id已分配，当我检查控制台时也一切正常，但在此阶段需要点击按钮更改类。例如当我点击“showConfirm（）”时我需要更改类在div中data-id = showConfirm（id）。现在我的div有绿色等级，当我点击按钮时，这个类变为红色。在jquery中，相同的脚本视图如下：

$(button).on(click, function(e){
 var element = $("div[data-id="+e+"]");
element.removeClass(green);
element.addClass(red)
});

怎么做？

编辑：

我看到我需要添加完整的代码才能说清楚：）

更新代码：

   $scope.showConfirm = function(e) {
     var confirmPopup = $ionicPopup.confirm({
       title: 'title',
       template: 'eeeeee'
     });
     confirmPopup.then(function(res) {
       if(res) {
          var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
          console.log(a);
          $http.get("http://example/rest_api/json?id="+e)
            .success(function(data){
              // if success set green
            })
            .error(function(){
              // if error set red
            })
       }
     });
   };

当我的服务器成功响应时，我需要更改类。

Answer 1

你应该以棱角分明的方式做所有事情。 angular.element不是正确的解决方案。

你可以使用ng-class of angular。

示例

<i class="fa" ng-class="{'class-name1': condition1 == 'true', 'class-2': condition2== 'true'}"></i>

如果条件1为真，那么将添加class-name1，如果condtion2为true，则将添加class-2类。

HTML

<div ng-class="{'green': buttonClicked == true, 'red': responseInYes== true}">

$scope.showConfirm = function(e) {
     $scope.buttonClicked = true;
     $scope.responseInYes= false;

 var confirmPopup = $ionicPopup.confirm({
   title: 'some title',
   template: 'ccccccc'
 });
 confirmPopup.then(function(res) {
   if(res) {
          $scope.buttonClicked = false;
          $scope.responseInYes= true;

   }
 });

};

我猜你在找这样的东西。

Answer 2

考虑使用ng-class代替class 例如

您也可以使用对象执行此操作，并根据您的编辑，它可能是：

更新HTML

<div data-id="{{mydiv.mydiv_id}}" ng-class="conditions[mydiv.mydiv_id] ? 'green' : 'red'">

在您的控制器$scope.conditions = {};中，只需将其设置为true和false中的success或error，如$scope.conditions[e] = true /* or false */;

请注意。如果您希望默认值为绿色，则只需在初始化时将条件设置为true，或者在假定预期值为负值的情况下进行验证和设置。

Answer 3

使用ng-class

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置HTML元素上的CSS类。

检查this。

在你的情况下，我建议：

$scope.isGreen = false; 
$http.get("http://example/rest_api/json?id="+e)
        .success(function(data){
          $scope.isGreen = true;
        })
        .error(function(){ 
        })

在你的Html文件中添加：

ng-class="{'class-green': isGreen, 'class-red': !isGreen}"

Answer 4

尝试更新mydiv内的属性：

<div class="{{mydiv._class}}">
    <p>some text </p>
    <button class="button button-primary" ng-click="showConfirm(mydiv)">
        Wykonane
    </button>
</div>

然后，在你的函数中：

$scope.showConfirm = function(e) {
    // your popup window and some more code ...

    e._class = 'yellow'; // class for fecthing data (waiting server json result)

    $http.get(URL).success(function(data) {
        e._class = 'green'; // class for success
    }).error(function() {
        e._class = 'red'; // class for error
    });
};

Angular find via属性

4 个答案: