从选择中更改其他 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

所以有很多方法可以使用选择来完成更改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 变量设置为数字类型，而其他时候您将数字设置为字符串。 （也许我在您的交叉帖子中看到了这一点）。数字和字符串的求值方式不同，因此请确定您要在用例中使用哪一种。