從 select 更改其他 ng-model 值。 ng-改變正確的方式？ AngularJS

Question

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}">
  <option value="previewWidth = 1920; previewHeight = 1080">1</option>
  <option value="previewWidth = 2000; previewHeight = 1060">2</option>
  <option value="previewWidth = 2080; previewHeight = 2000">3</option>
</select>

單擊另一個目標並忽略第一次單擊后，我現在執行此操作的方式（參見示例）會更新。 我認為這里的更新出錯了。 有沒有更好的方法來更新這個？

需要明確的是：我想更改 2 個 data-ng-model 值。

編輯：

<div id="breedte-edit" class="col-6">Breedte
 <input id="input-breedte" type="number" data-ng-value="1920" data-ng-min="600" data-ng-max="8000" data-ng-init="previewWidth='1920'" data-ng-model="previewWidth" class="form-control" required="required" aria-label="Sizing example input" maxlength="5">
</div>
<div id="lengte-edit" class="col-6">Lengte
 <input id="input-lengte" type="number" data-ng-value="1080" data-ng-min="600" data-ng-max="5000" data-ng-init="previewHeight='1080'" data-ng-model="previewHeight" class="form-control" required="required" aria-label="Sizing example input" maxlength="5">
</div>
<div id="reset-edit" class="col-4" style="margin-top: auto">
 <button type="button" class="btn btn-outline-dark" data-ng-click="GetNewData(); previewWidth = 1920; previewHeight = 1080" value="FETCH">Reset</button>
</div>
                  

以上是需要更改其值的輸入

Answer 1

因此，有很多方法可以使用 select 來更改previewHeight和previewWidth變量。 我將使用一組對象來解決這個問題。

// in controller

// initialize options
$scope.sizeOptions = [ 
    { width: 1920, height: 1080 },
    { width: 2000, height: 1060 },
    { width: 2080, height: 2000 }
];

// initialize preview width/height
// it's is better to avoid using ng-init and to initialize variables in your controller

// set initial select value
$scope.selectedItem = $scope.sizeOptions[0];

// or you could assign them to the variables you chose in your example

//  $scope.previewWidth = $scope.sizeOptions[0].width;
//  $scope.previewHeight = $scope.sizeOptions[0].height;

$scope.GetNewData = function(item){
    // do work with item here
    // item.width and item.height are available here
    // if you are using these width and heights in the view, you might not even need this function.
    // you could use selectedItem.width or selectedItem.height in your view
};


// in view (select)

<select data-ng-model="selectedItem" data-ng-change="GetNewData(selectedItem)">
    <option ng-repeat='option in sizeOptions' ng-value="option">{{$index}}</option>
</select>

由於這是針對學校的，我想您對編碼和/或 angularjs 有點陌生。 分配/設置變量時要小心。 在您的代碼中，有時您將previewHeight和previewWidth變量設置為數字類型，有時您在字符串中設置數字。 （也許我在您的交叉帖子中看到了這一點）。 數字和字符串的評估方式不同，因此只需確定您想將哪一種用於您的用例。