CODEWITHSUNDEEP
javascripthtmlangularjs
bradley546994
bradley546994

Reputation: 630

Angular find via attribute

I have problem with my script.

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

and 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>

Everything works well, id is allocated and when I check the console that also is all okay, but at this stage need to click the button changed class.For example when I'm click "showConfirm()" I need change class in div where data-id = showConfirm(id). Now my div have class green, when I' click button this class change to red. In jquery the same script view like this:

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

How to do it?

EDIT:

I see that I need to add full code to make it clear :)

updated code:

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

I need change class when my server is success response.

Upvotes: 2

Views: 2216

Answers (4)

taguenizy
taguenizy

Reputation: 2265

Consider using ng-class instead of class.
For example

You could also do this using objects, and based on your edit it could be something like:

Updating the HTML

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

And in your controller $scope.conditions = {}; and just set it to true or false in your success and error like : $scope.conditions[e] = true /* or false */;

Note. If you want the default to be green just set the condition to true on init or do the validations and settings assuming the expected to be a negative value.

Upvotes: 1

Chandra Prakash Variyani
Chandra Prakash Variyani

Reputation: 182

You should do everything in angular way. angular.element is not the right solution.

You can use ng-class of angular.

Example 

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

if condition 1 is true then class-name1 will be added, if condtion2 is true then class-2 class will be added.

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;

   }
 });

};

I guess you are looking for something like this.

Upvotes: 3

Massi Issar
Massi Issar

Reputation: 403

Use ng-class

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

Check this out.

In your case i suggest to do :

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

In your Html file add this: 

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

Upvotes: 1

Washington Guedes
Washington Guedes

Reputation: 4365

Try updating a property inside mydiv:

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

Then, in your function:

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

Upvotes: 1

Related Questions