Can multiple functions be included in a component in Angular JS?

I have an AngularJS component and I want to add a new function like onclick(). Can this be done within the existing component or do I need to create a new one?

 app.component('phoneDetail', {
     templateUrl: 'new.html',
     controller: ['$http','$routeParams',
       function PhoneDetailController($http,$routeParams) {
         var valueX = this;


         $http.get('http://angular.github.io/angular-phonecat/step-7/app/phones/'+ $routeParams.valueX + '.json').then(function(response){
            valueX.phone = response.data;
         });
       }]
 });

 $scope.littleSize = false;

 $scope.toggleSize = function() {
     $scope.littleSize = !$scope.littleSize;

If you have any suggestions or tips on how to achieve this, please share. Thank you.

javascriptangularjs

Answer №1

Controllers have the flexibility to house multiple functions, giving you the freedom to organize them in a logical manner.

For example:

app.component('phoneDetail', {
     templateUrl: 'new.html',
     controller: ['$http','$routeParams',
       function PhoneDetailController($http,$routeParams) {
          var controller = this;
          $http.get('http://angular.github.io/angular-phonecat/step-7/app/phones/'+ $routeParams.valueX + '.json').then(function(response){
            controller.phone = response.data;
          });
          controller.onClick = function() { console.log("I am clicked"); }
     }]
});

Code snippet for new.html:

<div>
    <span>{{ $ctrl.phone }}</span>
    <button ng-click="$ctrl.onClick()">Click me</button>
</div>

I believe I addressed your inquiry appropriately.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to display the "loading....." message on a PHP page?

I am working on a PHP webpage where I need to implement the following features: 1. Upon clicking "Say Thanks", it should change to "Done!". 2. Simultaneously, I would like to trigger an action in the indexController. 3. While this action is happening, I wa ...

phpjavascriptajaxzend-frameworkaccordion

Troubleshooting line break appearance glitch in Vue.js

When using my VueJS form, I encounter an issue where line breaks in my textarea content are ignored when rendering the email format on the Java backend side. How can I ensure that my line breaks are preserved when sending the content from the front end t ...

javascriptvue.jsvuejs2mime-message

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

javascriptjquerycssstylesheet

Guide for Uploading, presenting, and storing images in a database column with the help of jQuery scripting language

What is the best method for uploading, displaying, and saving an image in a database using jQuery JavaScript with API calls? I am working with four fields in my database: 1. File ID 2. Filename 3. Filesize 4. Filepath ...

javascriptjqueryjsonajax

Transform a dynamic list object in a form into JSON using javascript

I have been using a form submission script that converts form inputs to JSON and submits with ajax. It has worked well for simple forms in the past, but I am encountering an issue when trying to use it for lists. Within the form, there is a dynamic list o ...

javascriptjsonajaxforms

Creating a dynamic circle that expands in size based on the duration the user presses down (using Java Script)

I have a fun challenge for you! I want to create a growing circle on a canvas based on how long you hold your mouse button. Currently, I can draw a fixed width circle where my mouse was when I clicked, but I need it to dynamically change size as you hold t ...

javascripthtml

How can a list of objects in a JPA entity with a many-to-one relation to a data entity be sorted based on the result of a method call from the data entity?

In my JPA entity User, there is a OneToMany relation to a UserStats entity. I made changes to the code to use UserStats instead of storing victoryRatio directly in the User entity. Now, calculateVictoryRatio() method is implemented in the UserDetails entit ...

javascriptjavareactjsspringspring-boot

Ways to retrieve a field from various objects contained within an array

My array is empty and named $scope.mobData=[]; After using $http.get(..), I successfully push 10 JSON objects into the array, each with 7 data points. However, I only need to display two fields from each object: brandCode and brandName. Even though these ...

arraysangularjsionic-frameworkionic2

How can the 'env' property in Nuxt.js be utilized to access the new API?

I have been working on creating news web apps that utilize newsapi.org. To protect my API key, I decided to use the env property in Nuxt.Js. However, I am now encountering a 401 status code from the server. Firstly, I created the .env file in my project d ...

javascripttypescriptvue.jsnuxt.jsmiddleware

Alter the status of a checkbox programmatically

There are two checkboxes available: <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> The desired functionality is that when clicking on id3, id4 should also be checked. Initially, this works as e ...

javascriptjqueryhtml

Sorting objects in an array according to their prices: A guide

Suppose we have the following data structure: var lowestPricesCars = { HondaC: { owner: "", price: 45156 }, FordNew: { owner: "", price:4100 }, HondaOld: { owner: "", price: 45745 }, FordOld: { owner: "", ...

javascript

What are the steps for aligning GeoJSON data with terrain within Cesium Sandcastle?

I am currently using terrain view in Cesium Sandcastle and have loaded roads data in GeoJSON format as lines. I would like to clamp them on the terrain, similar to this example (select "Sample line positions and draw with depth test disabled" from drop-dow ...

javascriptgeojsoncesiumjssandcastleclamp

Leaflet Alert: The number of child elements is not the same as the total number of markers

Encountering a problem with Leaflet clustering using v-marker-cluster. Within the icon createFunction of the cluster, the className of children is used to determine the cluster style. Here is a snippet of this function : const childCount = marker_cluster._ ...

javascriptvue.jsvuejs2leafletleaflet.markercluster

What could be the culprit behind the error in the "blend-mode" function when using .mp4 files in Firefox?

Attempting to utilize mix-blend-mode with an mp4 playing in the background has been a fun experiment. The concept is to have a div containing some text, with the video playing in the background to create an effect on the letters. This method works flawless ...

javascriptcssreactjsfirefoxmix-blend-mode

Strange transparency glitch in Three.js

I've run into a perplexing issue while creating a 3D model for my website. One of the character's arms appears to be transparent, but only partially - you can see inside it. Here's what I'm talking about: Transparent arm. I've trie ...

javascript3dthree.jsrendering

Executing Http request with a particular ID in Django and AngularJS

Exploring AngularJS for the first time, I am attempting to retrieve data in one of my Django templates using AngularJS. The following is the code snippet where I am attempting to fetch the data: def download_history(request,download_id): from django.c ...

javascriptjquerydjangoangularjs

Searching recursively for keys with empty values in an array using Javascript

I've written a function that recursively locates empty values in a nested array. The function initially produces the correct value, but it seems to reset it to the input value before returning the result. What could I be overlooking? Below is my co ...

javascriptfor-looprecursionnested-loops

Oops! You're trying to render a Next.js page using a layout that has already been declared

I have created two different layouts in Next.js - MainLayout and DashboardLayout. import Navigation from '../Navigation'; export default function MainLayout({ children }) { return ( <> <Navigation links={[ ...

javascriptreactjsnext.js

What is the best way to generate a group and organize a list that works seamlessly with AngularJS and Bootstrap?

Hey there, I have a dataset that looks something like this (just a basic example). fruit, apple, $1 fruit, orange, $1 fruit, banana, $1 vegetable, sprouts, $2 vegetable, carrots, $1 Drink, water, $1 Drink, milk, $2 I am looking to create a list that gro ...

jqueryangularjstwitter-bootstrapsharepoint

What can we expect from the behavior of a localhost Express app with an Aurelia/Angular Admin Panel?

Currently, I am working on a Web Project that utilizes Express to serve the website and an Aurelia (or any Framework) App as an Admin Panel for editing the content. The Aurelia-App is being served through the static/public directory of Express, with the co ...

angularjsexpresscorsaurelia