6

I'm implementing angular js and is trying to get the input box's value and store it into the local storage. The input is typed by user and it's refer to ip address.

Below is my html code:

  <div>
    <input ng-model="serverip">
    <input type="button" class="button" value="Apply" ng-click="save()">
  </div>

Below is my js code:

.controller('Ctrl', function($scope) {

    $scope.save= function() {
        console.log($scope.serverip);
        localStorage.setItem('serverip', $scope.serverip);
    };
})

Why is it by using the above coding, after I key in the ip address into the input box, the $scope.serverip I get is always undefine?

Improve this question
3
  • 1
    How do you bind your controller to the HTML? Commented Jun 3, 2015 at 5:47
  • I'm using the ionic platform Commented Jun 3, 2015 at 6:13
  • can you provide plunker or jsfiddle with problem? Commented Jun 3, 2015 at 6:47

3 Answers 3

Reset to default
1

I kinda find out the correct answer. We have to pass back the serverip in the html:

  <div>
    <input ng-model="serverip">
    <input type="button" class="button" value="Apply" ng-click="save(serverip)">
  </div>

And in the js file:

.controller('Ctrl', function($scope) {

    $scope.save = function(serverip) {
        console.log(serverip);
        localStorage.setItem('serverip', serverip);
    };
})
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

$scope.save already has access to $scope.serverip. Passing it manually is unnecessary, and just avoids the data binding Angular is built to help you with.
0

Have you properly set ng-app and ng-controller? Here's a plunker demonstrating the behavior you want.

HTML:

<body ng-controller="Ctrl">
  <div>
    <input ng-model="serverip">
    <input type="button" class="button" value="Apply" ng-click="save()">
  </div>
  <p>
    Saved IP: {{savedip}}
  </p>
</body>

Controller:

var app = angular.module('plunker', []);

app.controller('Ctrl', function($scope) {

    $scope.save = function() {
        $scope.savedip = $scope.serverip
    };
})
Improve this answer

2 Comments

Yes. I think my ng-app and ng-controller is correct. Just that I always get undefined for $scope.serverip. If my ng-app and ng-controller is wrong, I think the $scope.save function will not run. Now, the $scope.save button got run.
This is nice. Instead of saving it as a angularjs. is it possible to save that value as an java object? I need to pass that value into my classes
0

This is the perfect working example of what you are looking:

Live: http://jsbin.com/bifiseyese/1/edit?html,console,output

Code:

<div ng-app="app" ng-controller="Ctrl">
    <input type="text" ng-model="serverip"/>
    <button ng-click="save()">Save</button>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script type="text/javascript">
angular.module('app',[]).controller('Ctrl', ['$scope', function($scope){
    $scope.save = function(){
        localStorage.setItem('serverip', $scope.serverip);
        console.log("localStorage.serverip = " + localStorage.serverip);
    };
}]);
</script>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.