Set input textbox value from another model in angularjs

Question

I have a html select field. I want to use the selecteditems pid attribute as a input textbox's default value. I tried the following two ways

My select field

<select ng-model="selectedProduct" ng-options="product.pname for product in products"></select>

Way 1:

<input type="text" data-ng-model="neworder.pid" ng-init="neworder.pid={{selectedProduct.pid}}" required />

Way 2:

<input type="text" data-ng-model="neworder.pid" required />

and in controller

$scope.neworder.pid = $scope.selectedProduct.pid

But failed to make both of them work. How to do it correctly?

Update

My form containing the select field.

<form name="addOrder" data-ng-show="addMode" style="width:600px;margin:0px auto;">
        <select ng-model="selectedProduct" ng-options="product.pname for product in products"></select>
        {{selectedProduct.pid}}
        <label>PID:</label><input type="text" data-ng-model="neworder.pid" ng-init="neworder.pid={{selectedProduct.pid}}" required />
        <label>OID:</label><input type="text" data-ng-model="neworder.oid" required />
        <label>QTY:</label><input type="text" data-ng-model="neworder.qty" required />
        <label>TOTAL:</label><input type="text" data-ng-model="neworder.total" required />
        <br />
        <!-- <span class="error" data-ng-show="addCustomer.$error.required">Required!</span>-->
        <br />
        <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addOrder.$valid" class="btn btn-primary" />
        <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
        <br /><br />
    </form>

add function in controller

$scope.add = function () {
            $http.post('/api/OrderDetails/', this.neworder).success(function (data) {
                alert("Added Successfully!!");
                $scope.addMode = false;
                $scope.orders.push(data);
            }).error(function (data) {
                $scope.error = "An Error has occured while Adding product! " + data;

            });
        };

JJJ · Accepted Answer · 2014-07-01 10:40:16Z

1

Why not just bind to the selectedProduct?

Like so:

<input type="text" ng-model="selectedProduct.pid" name="pid">

This works as you can see here.

Edit

Use ng-change like so:

<select ng-options="..." ng-change="newOrder.pid=selectedProduct.pid" ng-model="..."></select>

and

<input type="text" ng-model="newOrder.pid">

edited Jul 1, 2014 at 10:40

answered Jul 1, 2014 at 10:17

JJJ

3401 silver badge8 bronze badges

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

2 Comments

coder Over a year ago

because i need the model name to be 'neworder.pid' so that I can use all the form values in my controller by using this.neworder later on. I added my form so you can have a look.

JJJ Over a year ago

so use ng-change with a function which sets neworder.pid to selectedProduct.pid. that should work

Sydney Buildings · Accepted Answer · 2015-03-28 05:27:55Z

1

$http.get(some text here) .success(function(some text here) {

$scope.neworder ={name of your input field: 'text you want to show inside input field'};

    });

Just Remember, you have to write this inside $http.get() function, as it will fetch the value before entering into it from the user

answered Mar 28, 2015 at 5:27

Sydney Buildings

10510 bronze badges

Collectives™ on Stack Overflow

Set input textbox value from another model in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related