CODEWITHSUNDEEP
angularjs
coder
coder

Reputation: 97

Set input textbox value from another model in angularjs

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;

            });
        };

Upvotes: 1

Views: 13744

Answers (2)

Sydney Buildings
Sydney Buildings

Reputation: 105

$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

Upvotes: 1

JJJ
JJJ

Reputation: 340

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">

Upvotes: 1

Related Questions