javascriptangularjsangularjs-ng-show

angularjs how to pass element properties to ng-show function


There is one chart in my application like,

<canvas id="line" class="chart chart-line" height="250" width="{{width_chart}}" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-colors="colors" chart-dataset-override="datasetOverride" chart-click="onClick" ng-show="isChecked()"> </canvas> 

And in isChecked function i want to get id of this canvas which is "line" in this case. Then i want to check presence of this ID in one $scpoe.array , and based on presence i want to return true or false to make the chart show/hide.

$scope.isChecked = function() {
console.log('i am in isChecked function');
console.log(this);
      // some code
      return true;    
  };

My problem is i am not able to get the ID in function by any mean. "this" is also not working. I tried the directive way mentioned in below, but that is also not working.

Pass element using ng-show AngularJS

Please help.


Solution

  • You can get the id like the following:

    <div id="line" ng-click="ShowId($event)" ng-show="isChecked"></div>  
    
    $scope.ShowId = function(event){
        var id = event.target.id;
        if(id == 'line'){
          $scope.isChecked = true;
        }
    };
    

    Or:

    <div id="line" ng-click="ShowId($event)" ng-show="isChecked('line')"
    

     $scope.isChecked = function(id){ 
            if(id == 'line'){
              return true;
            }else{
              return false;
            }
    
      }
    

    If you are getting that from another ng-repeat or some other array just pass it as a model.