Angular find via attribute

Question

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.

Wow :o 3 anwsers on 4 min :o I must test it ;)

bradley546994
– bradley546994

2016-11-21 12:17:04 +00:00
Commented Nov 21, 2016 at 12:17 — bradley546994
– bradley546994, Commented Nov 21, 2016 at 12:17

Chandra Prakash Variyani · Accepted Answer · 2016-11-21 12:33:41Z

3

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.

edited Nov 21, 2016 at 12:33

answered Nov 21, 2016 at 12:15

Chandra Prakash Variyani

1826 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chandra Prakash Variyani Over a year ago

Modified answer. This may help you.

taguenizy · Accepted Answer · 2016-11-21 12:40:00Z

1

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.

edited Nov 21, 2016 at 12:40

answered Nov 21, 2016 at 12:15

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

2 Comments

taguenizy Over a year ago

You could update your condition inside your callback. I'll provide an updated answer

taguenizy Over a year ago

@bradley546994 this also allows you to have multiple items.

Washington Guedes · Accepted Answer · 2016-11-21 12:28:07Z

1

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

edited Nov 21, 2016 at 12:28

answered Nov 21, 2016 at 12:21

Washington Guedes

4,3753 gold badges35 silver badges59 bronze badges

2 Comments

Washington Guedes Over a year ago

@bradley546994. Does it fit your needs this way?

Washington Guedes Over a year ago

The main idea here is to maintain the MVC aspect: 1. The view {{mydiv._class}} will live in your HTML template 2. The controller will rule how and when to set the _class model-property from your javascript file.

Massi Issar · Accepted Answer · 2016-11-21 12:32:49Z

1

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

edited Nov 21, 2016 at 12:32

answered Nov 21, 2016 at 12:15

Massi Issar

4035 silver badges23 bronze badges

1 Comment

bradley546994 Over a year ago

It works but when I have multiple object for example ng-repeat all of object has class green.what I could do with it?

Collectives™ on Stack Overflow

Angular find via attribute

4 Answers 4

1 Comment

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related