Angular js значение установлено с помощью раскрывающегося изменения

Question

Я пытаюсь установить значение текстового поля, используя раскрывающийся список изменений. пожалуйста, проверьте мой код

HTML

<select ng-model="select.id" ng-options="x.id as x.name for x in cars"
        ng-change="setPrice();">
</select>

<input type="text" ng-model=select.price/> 

когда я сохраняю это, я должен отправить идентификатор. когда пользователь выбирает значение с помощью раскрывающегося списка, второе значение модели текстового поля должно быть соответственно установлено в качестве примера,

, когда пользователь выбирает ford, значение модели текстового поля должно быть 1000

когда пользователь выбирает Fiat, значение модели текстового поля должно быть 5000

мой java код сценария

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {id:"1", name : "Ford", value : 1000},
        {id:"2",name : "Fiat", value : 5000},
        {id:"3",name : "Volvo", value : 6000}
    ];  

    $scope.setPrice = function (){
        $scope.select.price = $scope.select.value;
    }

});

Вы можете помочь мне сделать это

Answer 1

Я хотел бы рассмотреть вопрос о предоставлении решения для вашего кода без каких-либо изменений в ng-model для select и input.

Есть две вещи, которые вы могли бы сделать,

1) Передайте select.id в функцию setPrice(), например,

<select ng-model="select.id" ng-options="x.id as x.name for x in cars" ng-change="setPrice(select.id)">

2) Отфильтруйте фактический массив $scope.cars с помощью id передается как,

$scope.setPrice = function(selectedId) {
   const data = $scope.cars.filter((item,i) => item.id === selectedId);
   $scope.select.price = data[0].value;
}

Функция фильтра выдаст результат в виде одного значения внутри массива, и, следовательно, вы можете использовать data[0].value, чтобы получить значение.

После двух изменений ваш полный код будет выглядеть так:

let app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.selected = {}
$scope.cars = [
        {id:"1", name : "Ford", value : 1000},
        {id:"2",name : "Fiat", value : 5000},
        {id:"3",name : "Volvo", value : 6000}
    ]; 

    $scope.setPrice = function (selectedId){
      const data = $scope.cars.filter((item,i) => item.id === selectedId);
      $scope.select.price = data[0].value;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 <select ng-model="select.id" ng-options="x.id as x.name for x in cars" ng-change="setPrice(select.id)">
  <input type="text" ng-model="select.price"/> 
</div>

Рабочий толкатель

Answer 2

Вы можете просто использовать ng-model в select:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.selected = {}
  $scope.cars = [
    {id:"1", name : "Ford", value : 1000},
    {id:"2",name : "Fiat", value : 5000},
    {id:"3",name : "Volvo", value : 6000}
  ];  

  $scope.getSelected = function() {
    console.log($scope.selected)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selected" ng-options="x.name for x in cars">
  </select>
  <input type="text" ng-model="selected.value" />
  <button ng-click="getSelected()">Get Selected</button>
</div>