Using AngularJS, how can I pass a clicked object property to a function?

Question

Using AngularJS, I am creating a wizard. In order to navigate properly, the clicked wizardresult.Title needs to be passed into the function showpagetwo().

Here is the HTML:

<div ng-app="wizardApp">
  <div ng-controller="MainCtrl">
    <div ng-repeat="wizardresult in wizardresults">

      <div id="initial" ng-if="wizardresult.RootItem =='Yes'">
        <button type="button" class="btn btn-primary" ng-click="showpagetwo()">{{wizardresult.Title}}
          ...
        </button>
      </div>

      <div id="pagetwo" style="display:none">
        ...
      </div>

    </div>
  </div>
</div>

My JS:

function showpagetwo(){
  console.log("Hello");
  $("#pagetwo").fadeIn();
  $( "#initial" ).hide()
}

var app = angular.module('wizardApp', []);
    app.controller('MainCtrl', function($scope, $http, $q){
      var supportList;
      $(document).ready(function() {
    $scope.getSupportList();
  });

  $scope.prepContext = function(url,listname,query){
    var path = url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query;
    return path;
  }

  $scope.getSupportList = function() {
    supportList = $http({
      method: 'GET',
      url: this.prepContext(siteOrigin+"/divisions/testing","SupportList","?$orderBy=Title"),
      headers: {
        "Accept": "application/json; odata=verbose"
      }
    }).then(function(data) {
      //$("#articleSection").fadeIn(2000);
      console.log(data.data.d.results);
      $scope.wizardresults = data.data.d.results;
    });
  };
});

I have tried ng-click="showpagetwo(wizardresult.Title)" and just ng-click="showpagetwo()"but the function is not firing at all either way.

What is my issue here?

Canastro · Accepted Answer · 2018-01-09 15:37:00Z

1

You just need to put your callback function in the $scope and pass the argument you want to receive.

Something like this:

HTML:

<div class="test" ng-controller="Ctrl">
    <button ng-click="myFn(wizardresult.Title);">click me</button>
<div>

JS:

var app = angular.module('app', []);

function Ctrl($scope) {
    $scope.wizardresult = {Title: 'myname'};
    $scope.myFn = function(param){
        alert("Param: " + param);
    };
}

Check this jsfiddle: http://jsfiddle.net/m1q4q4cm/

answered Jan 9, 2018 at 15:37

Canastro

3,00934 silver badges41 bronze badges

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

Comments

RahulB · Accepted Answer · 2018-01-09 15:44:21Z

Add the function showpagetwo() inside controller.

var app = angular.module('wizardApp', []);
app.controller('MainCtrl', function($scope, $http, $q){
      var supportList;
      $(document).ready(function() {
      $scope.getSupportList();
  });

  $scope.prepContext = function(url,listname,query){
    var path = url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query;
    return path;
  }

  $scope.showpagetwo= function(title){
    console.log("Hello "+title);
    $("#pagetwo").fadeIn();
    $( "#initial" ).hide()
  }
  $scope.getSupportList = function() {
    supportList = $http({
      method: 'GET',
      url: this.prepContext(siteOrigin+"/divisions/testing","SupportList","?$orderBy=Title"),
      headers: {
        "Accept": "application/json; odata=verbose"
      }
    }).then(function(data) {
      //$("#articleSection").fadeIn(2000);
      console.log(data.data.d.results);
      $scope.wizardresults = data.data.d.results;
    });
  };
});

Muhammed Anees · Accepted Answer · 2018-01-09 15:56:04Z

You cannot call a function outside your app directly with ng-click. The angular way of what you are trying to achieve will be like
Html

<div ng-app="wizardApp">
  <div ng-controller="MainCtrl">
    <div ng-repeat="wizardresult in wizardresults">

      <div id="initial" ng-if="wizardresult.RootItem =='Yes'" ng-show="showThisDiv">
        <button type="button" class="btn btn-primary" ng-click="showpagetwo(wizardresult.Title)">{{wizardresult.Title}}
          ...
        </button>
      </div>

      <div id="pagetwo" ng-hide="showThisDiv">
        ...
      </div>

    </div>
  </div>
</div>

Controller

app.controller('MainCtrl', function($scope, $http, $q){
$scope.showThisDiv = true
$scope.showpagetwo = function(wizardTitle){
  $scope.showThisDiv = true
}
});

For the animation effects, you can use angular-animate library and add class="animate-show animate-hide" to divs for the fade effects.

For some reason if you want to use jquery, then just change the scope function to

$scope.showpagetwo = function(wizardTitle){
      $("#pagetwo").fadeIn();
      $( "#initial" ).hide()
}

Hope this will help.

Collectives™ on Stack Overflow

Using AngularJS, how can I pass a clicked object property to a function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related