Utilize ng-include upon button click in AngularJS

Question

Utilize ng-include upon button click in AngularJS

Is it possible to activate an ng-include and display the content only upon clicking a button? I attempted to use the ng-if directive to show the div when the value of ng-model is true, however, this value remains unchanged in the myFunction function.

<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;
    }
})

javascript angularjs

Answer 1

Answer №1

Notice a mistake in your ng-click function - it should be myFunction instead of myFuntion. Also, consider using ng-if='include' rather than ng-if='include==true'.

const 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>

Answer 2

Notice a mistake in your ng-click function - it should be myFunction instead of myFuntion. Also, consider using ng-if='include' rather than ng-if='include==true'.

const 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>

Answer 3

Answer №2

To simplify the process, I would create a function that updates the variable path with a valid one instead of using ng-if.

$scope.changePath = function(newPath){
      $scope.path = newPath;
}

<div ng-include="path"></div>
<input ng-click="changePath('new/path/file.html')" type="button />"

Answer 4

To simplify the process, I would create a function that updates the variable path with a valid one instead of using ng-if.

$scope.changePath = function(newPath){
      $scope.path = newPath;
}

<div ng-include="path"></div>
<input ng-click="changePath('new/path/file.html')" type="button />"

Utilize ng-include upon button click in AngularJS

Answer №1

Answer №2

Similar questions

Need assistance with resolving this issue: Uncaught (in promise) TypeError: Unable to access properties of undefined (reading 'length')

The custom button feature is unresponsive to the enter key

Modify THREE.Mesh.position when slider value changes

Can a variable be assigned based on the current route being accessed?

Choose from a variety of video play options

How come my browser is mistaking my index.html file for a JavaScript file with this "Uncaught Syntax Error ... <" message?

Arranging CouchDB/Couchbase view based on the quantity of keys

Click on a specific date on the calendar in the Javascript Django application to retrieve items based on

Tips for adjusting the color of a link in the Navbar after being clicked

Merging Data with mongoDB

What methods can be used to save mouse coordinates to a remote server?

Issue with Nav Bar Toggle not changing text to white color

What is preventing comment upvotes from functioning properly? thinkster.io offers tutorials on AngularJS, MEAN stack, and the function incrementUpvote()

React is taking too long to render - Which architecture should I opt for?

Running into memory issues while constructing the heap

Adding ng-add & npm link - A guide to mocking the npm registry

What is the best way to output multiple Div elements using Jquery or Javascript?

Tips on serializing two arrays into JSON format and incorporating them in an AJAX request

How can a function be restricted to only one button for Bootstrap-5 scrolling to the bottom of modals?

How can I connect the box using the Interactive Picture jQuery tool?