ng-click function is not called with onclick in a AngularJS?

Question

I have to call the ng-click function with the onClick but in my case ng-click function is not

//Controller function
$scope.editProductDetail = function(productObject) {
		$scope.getProduct  = productObject;

	}

<a href="#" 
onclick="document.getElementById('editProduct').style.display='block'" ng-click="editProductDetail(list)"  target="_self">
</a>

call but model is open with onClick function?

why are you using onclick if you are using ng-click.Even after using angular you are are using onclick then there is no point in using angular js.Only use ng-click.There is no point in using onclick — Debabrata
– Debabrata, Commented Sep 12, 2017 at 17:13
Sir with the help of onClick i have open the model and show the select product data in the model.that's the reason i m using onClick? — Kapil Soni
– Kapil Soni, Commented Sep 12, 2017 at 18:28

ArthurG · Accepted Answer · 2017-09-12 17:44:02Z

It seems you're trying to set a class to the selected item from a product list, it seems you're confusing some AngularJS concepts.

If you're using AngularJS there's no need to use both onclick and ng-click.
If you want to show all products from your list you may want to use ng-repeat.
You need to initialize your Module for your AngularJS controller to load, and the controller must be within the module in the HTML code.

I've done an example bellow based on your code, it might help if you edit your answer and add your complete code.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.selectedIndex = 0;
    $scope.editProductDetail = function (index) {
      $scope.selectedIndex = index;
    };
    $scope.productList = [
      { name: 'Product 1', price: '1,00 U$' },
      { name: 'Product 2', price: '2,00 U$' },
      { name: 'Product 3', price: '3,00 U$' }
    ];
});

.selected-item {
  display: block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
  <h2>Selected Item Number: {{ selectedIndex + 1}}</h2> <!-- I've added +1 since index starts at 0 -->
  <div ng-repeat="item in productList">
  <a href="#" ng-click="editProductDetail($index)"  ng-class="{ 'selected-item': $index == selectedIndex }">{{ item.name}} {{item.price}} </a>
  </div>
</div>

@Kapil, if this answers your question, then click the little check-mark, to the left to mark it as the accepted answer.

axl-code · Accepted Answer · 2017-09-12 17:39:43Z

0

As debabrata was saying you don't need to use both, just use something like this:

// Your controller
$scope.editProductDetail = function(productObject) {
    $scope.setDisplayBlock = true;
    $scope.getProduct  = productObject;
}

// Your HTML
<a href="#" ng-click="editProductDetail(list)" target="_self"></a>
<span id="editProduct" ng-class="{'css-class-with-display-block': setDisplayBlock}">The element to change</span>

answered Sep 12, 2017 at 17:39

axl-code

2,3241 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

ng-click function is not called with onclick in a AngularJS?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related