【问题标题】:Angular.js: How do I initialize the ng-model of a <select> element to be the ng-selected option's value?Angular.js:如何将 <select> 元素的 ng-model 初始化为 ng-selected 选项的值?
【发布时间】:2015-09-07 22:44:04
【问题描述】:

我的选择如下所示:

<select ng-model="model.string">
     <option ng-repeat="option in options"
             ng-bind-html="option.name"
             ng-selected="option.name === 'Selected Option'"
             ng-value="option.value">
     </option>
</select>

无法知道哪个选项的名称是“选定选项”,我无法使用 ng-options。所以thisthis 并没有解决我的问题。

如何使 model.string 成为最初选择的值而不是 undefined 或任何它被初始化的值?

编辑: plunker

【问题讨论】:

  • 为什么不能使用ng-options?在我看来,这将是最好的解决方案。
  • 你试过 ng-init 吗? ng-init="model.string='yourVal'"
  • 我使用 optgroups 的组合将一个有时是 2D,有时是 1D 的数组映射到一个选择中。不,即使在我链接到它的答案之一中说明了它会更改所选值但不会更改模型(如该答案的 cmets 所述)。
  • ng-selected="option.name === model.string"?
  • model.string 应该具有所选选项的值。选择的选项不是model.string的值。

标签: javascript angularjs


【解决方案1】:

如果你不使用 ng-options,你必须“自己”初始化你的模型,在你的选项集合中选择值:

 $scope.getChosenOption = function()
 {
   for (var i in $scope.options)
    if ($scope.options[i].selected === 'selected')
     return $scope.options[i].name;
 };

$scope.selected = $scope.getChosenOption();

另外,我认为您在视图中使用“model.string”而不是“selected”$scope 变量打错了。

Here 你的 Plunker 更新了吗

【讨论】:

  • 真的没有别的办法了吗?对我来说似乎很奇怪,我必须第二次迭代数组(一次在 ng-repeat 中)只是为了在开始时将 ng-model 设置为 ng-selected 值。
  • 是的,也许有人会找到办法,但我认为没有 ng-options 是不可能的
【解决方案2】:

使用ng-options,它会自动选择ng-model中存在的值。

如果这对您不起作用,请添加更多详细信息,例如您的 JS 代码特别是您的 ng-model 对象。

最好是小提琴或笨蛋。


既然您如此热衷于使用ng-repeat 而不是ng-options,那么您可以通过以下方式实现它:

在您的控制器中添加以下代码:

$scope.model={};

for(var i=0;i<$scope.options.length;i++){
  var selectedOption = $scope.options[i].selected;
  if(selectedOption != null && selectedOption == "selected"){
    $scope.model.string = $scope.options[i].name
  }
}

更新的 Plunker:http://plnkr.co/edit/V6ogGyksHlAWrgtDhkMU?p=preview

【讨论】:

  • ng-options 不是一个选项(没有双关语)。我会做一个plunkr。
  • 如果真的没有“干净”的方式,我会接受并这样做。
猜你喜欢
  • 1970-01-01
  • 2015-05-10
  • 2017-04-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-07
相关资源
最近更新 更多