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

由于这是为学校准备的，我想您对编码有些陌生 and/or angularjs。 assigning/setting 变量时要小心。在您的代码中，有时您将 previewHeight 和 previewWidth 变量设置为数字类型，有时您将数字设置为字符串。（也许我在你的十字架上看到了这一点 post）。数字和字符串的计算方式不同，因此请确定您要将哪一个用于您的用例。

从 select 更改其他 ng-model 值。 ng-改变正确的方式？ AngularJS

change other ng-model value from select. ng-change the right way? AngularJS

html

javascript

twitter-bootstrap

angularjs