Transmit the identification to angularjs for the genuine content to be displayed

I have a hidden field where I store an Id, which can also be 2, 3, 4, or 59. I need to send this Id from the hidden field to my opgaver.js file so it can download the content.

However, I am facing difficulty in figuring out how to pass the Id to the opgaver.js file.

index.html

<div class="col-md-12" ng-app="Opgaver" ng-controller="OpgaverCheck">
    <input type="hidden" value="1" ng-model="Id" />
    <div ng-repeat="Value in Newslist">

    </div>
</div>

Opgaver.js

var app = angular.module('Opgaver', []);
app.controller('OpgaverCheck', function ($scope, $http) {

    //GET 
    var url = "/opgaver/kategori/"; //Id HERE//

    $http.get(url).success( function(response) {
        $scope.Newslist = response; 
    });
});

The challenge is: How to transfer the Id to opgaver.js for displaying content.

javascriptangularjs

Answer №1

To implement this in your HTML:

<input type="text" ng-init="categoryId='1'"  ng-model="categoryId" />

And make sure to add the following inside your controller:

$scope.$watch("categoryId", function() {
  var apiUrl = "/tasks/category/" + $scope.categoryId;
    $http.get(apiUrl).then( function(response) {
      $scope.TaskList = response.data; 
    });
});

Answer №2

It seems like you may not fully grasp the essence of Angular and its powerful features. With two-way data binding, you can declare a variable in the view using ng-model and access it in JavaScript through $scope. Conversely, you can declare a variable in JavaScript within $scope and display it in the view using ng-model or {{ }}.

Example from JavaScript:

$scope.myVariable = "I will meet you in the view";

In HTML:

ng-model="myVariable" or {{myVariable}}

By setting ng-model="Id" for your field, you can access that variable in the scope.

In JavaScript:

var url = "/tasks/category/" + $scope.Id;

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

What is the best way to access a scope variable within a directive in Angular?

I need to access a scope variable within a directive as a JavaScript variable. Here is the code snippet: app.controller("Home", ["$scope", function($scope) { ... $scope.nb_msg = data.length; ... }]); app.directive("myDiv", function() { // ...

javascriptangularjsscopeangularjs-directive

The simultaneous use of trackball controls and GUI is not compatible

When I click on them, the GUI changes together and I have looked at other answers. However, I am not sure where to put the listener. I tried putting the listener in render(), but it still doesn't work. How can I fix my code? This coding is related to ...

javascriptthree.js

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

javascriptcssreactjsmaterial-uimakestyles

Postman grants me the cookie, yet Chrome doesn't seem to deliver it

As I attempt to set a cookie named auth, containing the user's ID signed with JWT, I am puzzled by not seeing the auth cookie in Chrome when visiting http://localhost:5000/. Instead, I only observe these two cookies; Interestingly, when accessing the ...

javascriptnode.jsexpresscookies

cheerio scraping results in an array that is devoid of any data

Struggling to extract data from a website with the URL https://buff.163.com/market/csgo#tab=buying&page_num=1 using request-promise and cheerio. Check out my code snippet below: const request = require('request-promise'); const cheerio = requ ...

javascriptnode.jsweb-scrapingcheeriorequest-promise

Is there a way to retrieve the id attribute of an option element from the source component?

When a user makes a selection, I am trying to access the id attribute of the HTMLOptionElement. However, it always returns 0 instead of the actual id I passed (such as 1 or 2) from the select tag: <div class="col-8"> <select (cha ...

javascripthtmlangular

The concept of global object/scope and circular references in undefined cases

Trying to make sense of the outcomes from these few experiments : Experiment number 1 (in a new command line) : > _ ReferenceError: _ is not defined at repl:1:2 at REPLServer.self.eval (repl.js:110:21) at Interface.<anonymous> (repl. ...

javascriptnode.jsglobalcircular-reference

Is there a way for me to generate a preview thumbnail for my video?

Looking to add a preview effect to video thumbnails when users hover over them, displaying a series of frames from the video. Are there any jQuery plugins or tutorials available for creating this effect? ...

javascriptjquery

When working with AngularJS child routes, it is common for them to always redirect to the

My routing configuration is causing an issue where accessing a child route always redirects to the /login page instead of the intended route. Here is how my routing is set up: $stateProvider .state('login', { url: '/login', ...

angularjsroutesangular-ui-router

Targeting an HTML form to the top frame

Currently, I have a homepage set up with two frames. (Yes, I am aware it's a frame and not an iFrame, but unfortunately, I cannot make any changes to it at this point, so I am in need of a solution for my question.) <frameset rows="130pt,*" frameb ...

javascriptjqueryhtmlformstarget

Remove the most recently played sound from an array of sound using Vue.js

I've been trying to figure out how to randomize the sounds that play when a button is clicked, but I also want to avoid repeating the last played sound. It just doesn't sound right if the same sound plays repeatedly in quick succession. I'm ...

javascriptvue.jsaudiovuejs3

Having trouble with JSON search not functioning as expected in Select2 4.0?

After numerous hours of effort, I finally managed to successfully load and display the json file, complete with the flag icons using Select2 4.0. The code ended up appearing deceptively simple. However, I am now facing an issue where the search function i ...

javascriptjqueryjsonjquery-select2

The filtering feature for array and model selection in Angular's UI-Select appears to be malfunctioning

Below is a Json structure: $scope.people = [ { name: 'Niraj'}, { name: 'Shivam'}, { name: 'Arun'}, { name: 'Mohit'}] There's also a variable, var array = "Niraj,Shivam";. My goal is to filter out the names fro ...

javascriptangularjsarraysjson

Implementing CORS for controlling the origin of post requests

I am currently in the process of setting up a route at sub.domain.com/route. On domain.com, I have an Angular app that sends a post request to that endpoint. My main concern is whether I need to implement CORS on sub.domain.com/route to restrict post requ ...

angularjssecuritycors

Ajax received a response from http 409 and is now parsing it

Hey there! I've been working on parsing out the message object using Ajax, and I'm having a bit of trouble getting a reference to messages.msg. It's strange because it displays perfectly fine in Postman, but for some reason, I can't see ...

javascriptjqueryajaxerror-handlingxmlhttprequest

Trouble with JavaScript preventing the opening of a new webpage

I need help with a JavaScript function to navigate to a different page once the submit button is clicked. I have tried using the location.href method in my code, but it's not working as expected. Even though I am getting the alert messages, the page i ...

javascripthtml

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

javascripthtmlcssvue.jsvuejs2

What is the best way to access a particular property of an object?

Currently, I am successfully sending data to Mongo and storing user input information in the backend. In the console, an interceptor message confirms that the data is received from MongoDB. However, I am struggling to extract specific properties such as th ...

javascriptmongodbvue.jsbackend

Data Binding in AngularJS appears to be non-functional

Experimenting with AngularJS, I created a small code snippet that doesn't seem to bind data properly. Here is the HTML and JS code for those who prefer not to visit the provided link: first.html <!doctype html> <html ng-app="firstApp"> & ...

javascriptangularjsdata-binding

Obtaining a group object when the property value matches the itemSearch criteria

What is the best way to extract specific objects from a group when one of their properties has an array value, specifically using _.lodash/underscore? { "tileRecords" : [ { "tileName" : "Fama Brown", "tileGroup" : ["Polished", "Matt", ...

javascriptangularjsjsonunderscore.jslodash