当我尝试访问参数时变得不确定

Question

I am trying to access the parameter which is passed to the JavaScript function and alert the value. but when i alert the value i am getting undefined in alert. what is wrong i have done here.

html

<div ng-app="plusminusApp" ng-controller="categorylist">        
    <div class="whitescreen" id="buttons-overlay">
        <div class="icons-container">
            <div class="icons-inside-container">
            <div ng-repeat="category in categories" value="{{category.picture}}" class="category-icon-thumbnail" onclick="setCategory(this.value);">
                        <img value="{{category.category}}" src="{{category.picture}}">
            </div>
            </div>
        </div>
    </div>
</div>

app.js

function setCategory(category){
    alert(category)
    document.getElementById('buttons-overlay').style.display = 'none';
}

Answer 1

If you want to pass a angular's scope value to a function, it must be ng- prefixed event. You can't pass scope variable to a function outside of angular context.

      <div ng-repeat="category in categories" value="{{category.picture}}" class="category-icon-thumbnail" ng-click="setCategory(category.picture)">

and the function must be in the scope of the controller that means you need to define $scope.setCategory = function(val){}

Answer 2

HTML:

<div ng-app="plusminusApp" ng-controller="categorylist">        
<div class="whitescreen" id="buttons-overlay">
    <div class="icons-container">
        <div class="icons-inside-container">
        <div ng-repeat="category in categories"class="category-icon-thumbnail" >
            <img value="{{category.category}}" src="{{category.picture}}" ng-click="setCategory(category.picture);">
        </div>
        </div>
    </div>
</div>

JS:

$scope.setCategory = function(val){
     console.log(val)
 }

Answer 3

Assuming this to be your json

$scope.categories = [{
    'category': 'ABC',
    'picture': 'https://randomuser.me/api/portraits/men/22.jpg'
  }, {
    'category': 'ced',
    'picture': 'https://randomuser.me/api/portraits/men/13.jpg'
  }]

Use the below code

$scope.setCategory =function(category) {
    $scope.something=category;

    document.getElementById('buttons-overlay').style.display = 'none';
  }



<div ng-app="plusminusApp" ng-controller="categorylist">
    <p>Hello!</p>
    <div class="whitescreen" id="buttons-overlay">
      <div class="icons-container">
        <div class="icons-inside-container">
          <div ng-repeat="category in categories" value="{{category.picture}}" class="category-icon-thumbnail">
            <button ng-click="setCategory(category.category)"> {{category.category}}
            </button>
            <img value="{{category.category}}" src="{{category.picture}}">
          </div>
        </div>
      </div>

    </div>
  </div>

For simplicity and understanding purpose I have changed the click event from div to button.

LIVE DEMO