下拉式裝訂角度

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：在testCtrl定義callTest函數

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

在select中使用ng-change event並在控制器中調用callTest()函數。

這是Plunker

Answer 2

我將使用的基本步驟是：

1. 使用<select> ng-change事件使用angular.copy()創建car副本
2. 將復制的對象綁定到文本框ng-model="carCopy.propName"
3. 編輯汽車
4. 保存時，使用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一起使用或更容易遷移。