AngularJS - cannot change value of a inputbox

Question

The code below changes an input value from 100 to 200 using Angular. When using my controller to change the value of an input box I am getting a TypeError.

<div ng-controller="FooController" ...>
      <input ng-model="foo.price" type="text" name="price"  class="price" id="price-min" ng-init="foo.price = '100'" />
    ...
    </div>

Controller:

Foobar.controller('FooController', ['$scope', function ($scope) {

setPrice($scope);


function setPrice($scope) {
var price = '200';
    $scope.foo.price = price;

}]);

error:

TypeError: Cannot set property 'price_min' of undefined

I can provide additional code or information if needed

do not use $scope in this way function setPrice($scope){...} — Shaxrillo
– Shaxrillo, Commented Jun 26, 2015 at 17:01

hogan · Accepted Answer · 2015-06-26 20:21:29Z

1

I think you want this:

Html-Code:

<div ng-controller="FooController">    
<input ng-model="foo.price" type="text" name="price"  class="price" id="price-min"  ng-init="foo.price = '100'"/>

Angular-Code:

var Foobar = angular.module('testapp', []);

Foobar.controller('FooController', ['$scope', function($scope) {

    $scope.foo = {};
    setPrice($scope);

    function setPrice($scope) {
       $scope.foo.price = "400";
    }
}]);

The problem is that you don't have foo, yet. This is similar to writing

function test(){
    i=123;
}

See what's missing?

However when running this, the ng-init comes after the controller's instantiation. That means you're input has the value 100

In Order to understand, please provide more information what you want to achieve (why the change?)...

answered Jun 26, 2015 at 20:21

hogan

1,5611 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajal · Accepted Answer · 2015-06-26 17:09:17Z

1

Try modifying the controller as:

Foobar.controller('FooController', ['$scope', function ($scope) {

$scope.setPrice = function() {
    $scope.foo = {'price': 200};
    return $scope.foo.price;
}
$scope.setPrice();

}]);

edited Jun 26, 2015 at 17:09

answered Jun 26, 2015 at 17:01

Sajal

4,4111 gold badge22 silver badges41 bronze badges

2 Comments

Jebathon Over a year ago

I am getting $scope.setPrice(); is not a function when doing this

Jebathon Over a year ago

Its not that it didn't work. I was looking for hogans solution

Jorge Casariego · Accepted Answer · 2015-06-26 17:09:11Z

0

I think you're trying to do this

HTML

<div ng-controller="setPrice">
   <input ng-model="foo.price" type="text" name="price"  class="price" id="price-min" ng-init="foo.price = '100'" />

    <br/><br/>

  Hello, {{foo.price}}!
</div>

JS

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

setPrice($scope);

function setPrice($scope) {
    var price = '200';
    $scope.foo = {
        price : price
    };
}

The error was the way you declare your $scope.foo

Here the example in JSFiddle

answered Jun 26, 2015 at 17:09

Jorge Casariego

22.3k6 gold badges94 silver badges98 bronze badges

1 Comment

Jebathon Over a year ago

Why can't I just use $scope.foo.price = price? What if I have multiple attributes like a name $scope.foo.name. Will they get overwritten?

Collectives™ on Stack Overflow

AngularJS - cannot change value of a inputbox

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related