4

Suppose I have this controller:

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

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

When a user selects a car it should automatically bind values of the selected car to the text boxes, which already happens in this case. However, when I change the value in the text box for the carModel, the carModel name in the dropdown changes.

How can I change the input for the carModel without changing the value in the dropdown? Note that I want to bind the information of the currently selected car to the textboxes whenever the user selects a different value from the dropdown.


Use Case

Suppose a list of cars is retrieved from a database and I want the user to edit the selected car, so first I want to show the car information when the user selects it from from the dropdown, then change whatever he wants and call a web service to update the selected car.

2
  • what is use case for changing the text boxes if model object itself isn't to be changed? Why can't you bind the text boxes to a copy of car using events?
    – charlietfl
    Jan 31, 2016 at 15:29
  • @charlietfl check my updated question Jan 31, 2016 at 15:36

3 Answers 3

4

You can use angular.copy for this:

JavaScript: define callTest function in your testCtrl

$scope.cars = [ ... ];

$scope.callTest = function(objCar) {
  console.log(objCar);
  $scope.carModel = angular.copy(objCar); // this carModel is used in the html
};

HTML:

<select ng-change="callTest(car)" ng-options="car as car.carModel for car in cars" ng-model="car"></select>
<br />
<label> Car ID </label>
<input type="text" ng-model="carModel.carId" />
<br />
<label> Car Model </label>
<input type="text" ng-model="carModel.carModel" />
<br />
<label> Car Owner </label>
<input type="text" ng-model="carModel.carOwner" />

Use ng-change event on select and call callTest() function in the controller.

Here is the Plunker

2
  • this is a good option but I wonder is there any way we can do the same without copying objects Jan 31, 2016 at 15:52
  • @NaderHisham try one time binding: <select ng-options="::car as car.carModel for car in cars" ng-model="car"></select>
    – Alon Eitan
    Jan 31, 2016 at 15:57
2

The basic steps I would use would be:

  1. Use ng-change event of <select> to create copy of car using angular.copy()
  2. Bind copied object to text boxes ng-model="carCopy.propName"
  3. Edit the car
  4. On save, use angular.extend() to merge updates back to original car
1

This is also possible by using directives. Pass car as string parameter. Directive template shows form. Variable in select won't change since it's Object variables are passed as string to directive.

template.html

<br />
<label> Car ID </label> <input type="text" ng-model="carId" />
<br />
<label> Car Model </label> <input type="text" ng-model="carModel" />
<br />
<label> Car Owner </label> <input type="text" ng-model="carOwner" />

html view

 <select ng-options="car as car.carModel for car in cars" ng-model="car"></select>
 <ca car-id="{{car.carId}}" car-model="{{car.carModel}}" car-owner="{{car.carOwner}}"></ca>

And the directive which You can customize.

.directive('ca', function() {
  return {
    scope:{
            carId:'@',
            carModel:'@',
            carOwner:'@'
        },
    templateUrl: 'template.html'
  };
});

plunker

This example may work with Angular 2.0 or be easier to migrate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.