Блог

Главная - Вопросы по программированию - Установите значение текстового поля ввода из другой модели в angularjs

Установите значение текстового поля ввода из другой модели в angularjs

#angularjs

#angularjs

Вопрос:

У меня есть поле выбора html. Я хочу использовать атрибут selecteditems pid в качестве значения по умолчанию для текстового поля ввода. Я попробовал следующие два способа

Мое поле выбора

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

Способ 1:

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

Способ 2:

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

и в контроллере

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

Но не удалось заставить их оба работать. Как это сделать правильно?

Обновить

Моя форма, содержащая поле выбора.

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

добавьте функцию в контроллер

 $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;

            });
        };

Ответ №1:

Почему бы просто не привязать к selectedProduct ?

Вот так:

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

Это работает, как вы можете видеть здесь.

Редактировать

Используйте ng-change вот так:

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

и

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

Комментарии:

1. потому что мне нужно, чтобы имя модели было ‘neworder.pid’, чтобы я мог использовать все значения формы в моем контроллере с помощью this.neworder позже. Я добавил свою форму, чтобы вы могли посмотреть.

2. поэтому используйте ng-change с функцией, которая устанавливает neworder.pid значение selectedProduct.pid . это должно сработать

Ответ №2:

$http.get(некоторый текст здесь) .success(функция (некоторый текст здесь) {

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

    });

Просто помните, вы должны записать это внутри функции $http.get(), так как она будет извлекать значение перед вводом в него от пользователя