Currently, I am attempting to retrieve text input through the use of AngularJS

Having trouble retrieving text input values using Angular JS? The console keeps showing undefined.

<div ng-controller="favouritesController" class="col-xs-12 favList">
  <input type="text" ng-model="newFav" ng-keyup= "add($event)" class="col-xs-12 FavInput" placeholder="Add A Favourite">
  <ul>
  <li ng-repeat="weatherList in weatherLists" class="col-xs-12">
  <span class="col-xs-12 col-sm-8">{{weatherList._id + ' / ' + weatherList.place}}</span>
  <div class="col-xs-12 col-sm-2">
    <button type="button" name="button" class="deleFav" ng-click="delete(weatherList)">Delete</button>
    <div class="col-xs-12">
      <input type="text" ng-model="serverip"/>
      <button ng-click="save(serverip)">Save</button>
    </div>
  </div>
</li>
</ul>
</div>

js code

myApp.controller('favouritesController', function($scope, $http, $rootScope, $route, $location) {
 $scope.save = function(){
  console.log($scope.serverip)
 }
})

Answer №1

There is no need to include the parameter in the save function (and it's not defined that way). Just update the button to:

<button ng-click="save()">Save</button>

Alternatively, you can modify the function declaration to accept the parameter:

$scope.save = function(serverip) {
 console.log(serverip)
}

Answer №2

Using ng-repeat creates a separate scope that inherits from the one above it. When you assign serverip to this new scope, the $scope in the favouritesController's context does not have access to it. One solution is to pass a parameter to your save function and log it (since you are already passing arguments to the function).

Edit: Alternatively, you can expose a property that will be inherited by ng-repeat:

Controller:

myApp.controller('favouritesController', function($scope, $http, $rootScope, $route, $location) {
  $scope.ip = { serverip:'' };
  $scope.save = function(){
    console.log($scope.ip.serverip)
  }
});

Template

<div ng-controller="favouritesController" class="col-xs-12 favList">
  <input type="text" ng-model="newFav" ng-keyup= "add($event)" class="col-xs-12 FavInput" placeholder="Add A Favourite">
  <ul>
  <li ng-repeat="weatherList in weatherLists" class="col-xs-12">
  <span class="col-xs-12 col-sm-8">{{weatherList._id + ' / ' + weatherList.place}}</span>
  <div class="col-xs-12 col-sm-2">
    <button type="button" name="button" class="deleFav" ng-click="delete(weatherList)">Delete</button>
    <div class="col-xs-12">
      <input type="text" ng-model="ip.serverip"/>
      <button ng-click="save()">Save</button>
    </div>
  </div>
</li>
</ul>
</div>

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

Managing iframes in React using reference methods

Trying to set the content of an iframe within a React component can be a bit tricky. There is a component that contains a handleStatementPrint function which needs to be called when the iframe finishes loading. The goal is to print the loaded iframe conten ...

Add an element to the input field

Two input buttons are available for users to upload files. <input type="file" id="fileUpload" name="files" multiple><br/> <div id="selectedFiles"></div> The selected files will be appende ...

Can Angular routing be used with a LAMP server?

I have decided to host my Angular 2 application on which offers a traditional LAMP stack for hosting. In my local ng serve environment, the route www.mysite.com/myapp/item/:id functions perfectly. However, when trying to access www.mysite.com/my-app/ite ...

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

Is there a way to transfer parameters from a Vue function to a component?

I am struggling to find the right solution for passing parameters to a function. I need to use NavigateTo to send a String value to my index in order to switch components without using Vue Router. Home.js Vue.component('Home', { props: [&apo ...

Error message: A circular structure is being converted to JSON in Node.js, resulting in

So here is the error message in full TypeError: Converting circular structure to JSON --> starting at object with constructor 'Socket' | property 'parser' -> object with constructor 'HTTPParser' --- prope ...

Vue.js v-else-if directive not functioning properly: Unable to resolve directive: else-if

I am encountering a compilation error while using "if" and "else-if". [Vue warn]: Failed to resolve directive: else-if Here is the code I am working with: var app = new Vue({ el:"#app", data:{ lab_status : 2 } }); <script src="https: ...

Utilizing Sequelize to search for existing items or create new ones in a list

My experience with sequelize is limited and I am having trouble understanding certain aspects. Despite my efforts to search for more information, I couldn't find anything specific that addresses my confusion. // API Method function SeederApi(req: Req ...

The extensive magnetic scrolling functionality in Ionic 2 sets it apart from other frameworks

Hi everyone, I could really use some assistance! I've been working on developing an Ionic 2 App and my navigation setup is not too complex. I have a main menu where clicking on an item opens another menu with a submenu. From there, if I click on an i ...

Tips on how to connect the scope from a controller to a custom directive in Angular

Currently, I am delving into the world of Angular and finding myself immersed in directive lessons. However, as I engage in some practice exercises, I have encountered a stumbling block. Specifically, I have developed a custom directive with the intention ...

The error message "TypeError: Cannot set property 'href' of undefined" occurred at angular.js line 12520 when trying to set $window.location.href

Has anyone tried using a directive function to redirect when clicking with ng-click? Here is the HTML code: <a ng-click="navbarlinksCtrl.clickedfr()" ng-class="{active: clickedfr()}">FR</a><br> <a ng-click="navbarlinksCtrl.clickeden( ...

Getting services in a directive in AngularJS by function name: How to do it?!

I am looking for a way to incorporate a reusable pattern in my directive, such as displaying a modal with a list of data. The modal will have a method to retrieve data, which is defined in a service. The service is dynamically generated based on the parame ...

Creating a typewriter effect with Vue Js

Hey there, I'm having some trouble with the code below while working on my Vue project. It seems to be functioning correctly, but for some reason it's not working in my Vue environment. const text = document.getElementById("text"); const phrase ...

Complete interaction with child processes in Node.js

I have a basic C++ program compiled using the command gcc 1.cpp -o 1.exe. // 1.cpp #include <stdio.h> int main(){ int num = 0; scanf("%d", &num); printf("%d", num + 1000); scanf("%d", &num); printf("\n%d", num + 1000); ...

JavaScript-based tool for extracting content from Sketch file

My goal is to extract the contents of a .sketch file. I have a file named myfile.sketch. When I rename the file extension to myfile.zip and extract it in Finder, I can see the files inside. However, when I try the same process on the server using Node.js ...

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

Creating a stunning art exhibition using React Native

Currently, I am in the process of creating a gallery component that utilizes both the scrollview and image APIs. I'm curious about how the scrollview manages its child components when it scrolls down. Does it unmount the parts that are not currently ...

Reply to changes in the window size *prior to* adjusting the layout

Take a look at the "pixel pipeline" concept illustrated with a vibrant diagram on this page. I am currently working on resizing an element (let's say, a span) dynamically when the browser window is resized. I have implemented this using window.onresi ...

Angular Firebase Count of Items in List

My current dilemma revolves around obtaining a count of items within a firebase list. Firebase details: foods randompushid title: apple, comboQuery: apple23523526(userid) Angular Code snippet: this.foods= this.firebaseDB.list(& ...

The JQuery error encountered was due to a missing colon after the property ID

I'm currently working on some jQuery code that is supposed to hide one paragraph and show another when a specific action is triggered. I have created a class called "showp" which displays the targeted paragraph while ensuring that other paragraphs are ...