CODEWITHSUNDEEP
javascriptangularjs
Diego Soares
Diego Soares

Reputation: 215

Execute ng-include when a button is clicked - Angularjs

I want to execute a ng-include and show the content only after a button is clicked. I tried to use the ng-if directive and show the div when the ng-model is true, but his value is not changed in the myFunctionfunction.

<div ng-controller='myCtrl'>
    <div ng-if='include==true' ng-include='"path"'></div>
    <input type="button" ng-click='myFuntion()'/>
</div>

.controller('myCtrl', function($scope){
    $scope.include = false;
    $scope.myFunction = function(){
        $scope.include = true;
    }
})

Upvotes: 2

Views: 42

Answers (2)

Martin Larocque
Martin Larocque

Reputation: 190

I would simply create a function that change the variable path for a valid one, no need to do a ng-if

$scope.myFunction = function(newPath){
      $scope.path = newPath;
}
<div ng-include="path"></div>
<input ng-click="myFunction('path/to/file.html')" type="button />"

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

There is a typo in your ng-click function. myFuntion should be myFunction. You can also just use ng-if='include' instead of ng-if='include==true'.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.include = false;
     $scope.myFunction = function(){
        $scope.include = true;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-if='include'>Clicked</div>
  <input type="button" ng-click='myFunction()'/>
</div>

Upvotes: 2

Related Questions