Imagine having a controller like this:
myApp.controller('testCtrl', function ($scope) {
$scope.cars = [
{ carId: '1', carModel: 'BMW', carOwner: 'Nader' },
{ carId: '2', carModel: 'Mercedes', carOwner: 'Hisham' },
{ carId: '3', carModel: 'Opel', carOwner: 'Saad' }
];
});
and this specific HTML structure:
<select ng-options="car as car.carModel for car in cars" ng-model="car"></select>
<br />
<label> Car ID </label> <input type="text" ng-model="car.carId" />
<br />
<label> Car Model </label> <input type="text" ng-model="car.carModel" />
<br />
<label> Car Owner </label> <input type="text" ng-model="car.carOwner" />
If the user selects a car, the values should automatically populate the text boxes. However, changing the carModel value updates the dropdown selection as well.
How can you modify the carModel input without altering the dropdown value? The goal is to keep the selected car's information displayed in the textboxes whenever the user changes the dropdown option.
Scenario
Picture a scenario where a list of cars is fetched from a database and users need to edit their selections. The idea is to present the details when a car is chosen, allow modifications, and then trigger an update via a web service call.