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

Question

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

javascript angularjs

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

Similar questions

Tips for dynamically updating values when input numbers are modified using JavaScript

How come using a query object as a parameter for .limit() returns an empty array?

Utilizing ngModel within the controller of a custom directive in Angular, instead of the link function

I have exhausted all options trying to filter a 2D array in JavaScript

React does not allow objects as a valid child element. This error occurs when an object with keys {nodeType, data, content} is found

"How to set the header in AngularJS when opening a new window with a GET request URL

Is it possible to quickly sync API data with a CSV file for updates?

Ways to implement material-ui button design on an HTML-native button

Utilize Vue.js to selectively display or manipulate objects with a

How to Handle Form Processing in AngularJS Before Submission

Choosing2 - incorporate a style to a distinct choice

Tips on dynamically changing the position of a div: Utilize absolute positioning within a for loop

Using the typeof operator to test a Typescript array being passed as an object

Unlimited possibilities with parameters on an express server

Click on another part of the page to reveal a dropdown menu

Angular 2 Error: AOT issue with base64 function not recognized

Receiving a 500 status code upon converting a SqlDataReader into Json format

A mysterious token, $attrs, is an angular directive that seems to be used for comparing

Refreshing Templates in Angular with ui.router

Attempting to transform HTML code received from the server into an image, but encountering an error while using ReactJS