Question

假设我有这个控制器：

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' }
    ];
});

和这个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" />

当用户选择汽车时，它应自动将所选汽车的值绑定到文本框，在这种情况下已经发生。但是，当我更改carModel文本框中的值时，下拉列表中的carModel名称会更改。

如何在不更改下拉列表中的值的情况下更改carModel的输入？请注意，只要用户从下拉列表中选择不同的值，我就会将当前所选汽车的信息绑定到文本框。

使用案例

假设从数据库中检索汽车列表，并且我希望用户编辑所选汽车，因此首先我想在用户从下拉列表中选择汽车时显示汽车信息，然后更改他想要的任何内容并致电用于更新所选汽车的Web服务。

Answer 1

您可以使用angular.copy：

JavaScript：在callTest

中定义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" />

在控制器中选择并调用ng-change event功能时使用callTest()。

以下是Plunker

Answer 2

我将使用的基本步骤是：

使用ng-change <select>事件使用car

angular.copy()

将复制的对象绑定到文本框ng-model="carCopy.propName"
编辑汽车
保存时，使用angular.extend()将更新合并回原始car

Answer 3

这也可以通过使用指令来实现。将汽车作为字符串参数传递指令模板显示表单。 select中的变量不会发生变化，因为它的Object变量作为字符串传递给指令。

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

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

您可以自定义的指令。

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

plunker

此示例可能适用于Angular 2.0或更易于迁移。

下拉式装订角度

3 个答案: