我如何获得一个选择标记的NG-模型来获得最初选择的选项？ [英] How do I get the ng-model of a select tag to get the initially-selected option?

问题描述

我是pretty新角度，所以我可能要对此都错了......

I'm pretty new to Angular, so I may be going about this all wrong...

我有一个＆LT;选择＆GT;类似以下内容：

I have a <select> similar to the following:

<select ng-model="mySelectedValue">
    <option value="">--</option>
    <option ng-repeat="myValue in someDynamicArrayOfValues" value="{{myValue}}" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(myValue)">{{myValue}}</option>
</select>

这主要是工程...的下拉最初呈现与选择正确的选项，如果我的变更的选择的选项，然后 mySelectedValue 将获得新的选择。然而， mySelectedValue 没有得到的最初的-selected选项。 mySelectedValue 是空白的，直到我更改下拉值。

This mostly works... The dropdown initially renders with the correct option selected, and if I change the selected option, then mySelectedValue will get the new selection. However, mySelectedValue does NOT get the initially-selected option. mySelectedValue is blank until I change the value in the dropdown.

我看着NG-init，但是似乎之前 someDynamicArrayOfValues​​ 来得到评估设置...

I looked at ng-init, but that seems to get evaluated before someDynamicArrayOfValues is set...

有没有一种方法可以让我得到 mySelectedValue 在最初选择＆LT接收值;选项＆GT;

Is there a way I can get mySelectedValue to receive the value in the initially-selected <option>?

结果
更新：的结果
我忘了提，我也用NG选项尝试过，但还没有任何运气获得，为了与确定选择哪个选项工作。

UPDATE:
I forgot to mention that I had also tried using ng-options, but haven't had any luck getting that to work in conjunction with determining which option was selected.

我试过这样：

<div ng-show="someDynamicArrayOfValues">
    <select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)">
        <option value="">--</option>
    </select>
</div>

和这样的：

<div ng-show="someDynamicArrayOfValues">
    <select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()">
        <option value="">--</option>
    </select>
</div>

但既不是这些工作，因为选择是建立（和NG-init和NG-选择都得到评估）的前的 someDynamicArrayOfValues​​ 已设置，因此，前的＆lt;选择＆GT;甚至可见。当使用＆LT;选项NG重复=...＆GT; 中，＆lt;＆选择GT;没有得到建/在初始化状态的之后的 someDynamicArrayOfValues​​ 设置，这就是为什么我一直在往那个方向发展。

but neither of those work because the select is built (and ng-init and ng-selected both get evaluated) before someDynamicArrayOfValues has been set and, therefore, before the <select> is even visible. When using <option ng-repeat="...">, the <select> doesn't get built/initialized until after someDynamicArrayOfValues is set, which is why I had been going that direction.

有没有办法让NG选项技术工作，同时，在同一时间，有选择依赖于 someDynamicArrayOfValues​​ （如果异常的选项是更好路要走）？

Is there a way to get the ng-options technique to work while, at the same time, having the select dependent on someDynamicArrayOfValues (if ng-options is the better way to go)?

结果
更新2 的：结果
这里有一个Plunker（从ababashka的回答修改）这是一个有点接近什么，我最终努力实现：的 http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=$p$pview 。这还没有应用......我想它让每个 someDynamicArrayOfValues​​ 与曾经最接近的匹配动态值设定的3下拉菜单设置的。

UPDATE 2:
Here's a Plunker (modified from ababashka's answer) that is a little closer to what I'm ultimately trying to achieve: http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=preview. It's not quite there yet... I'd like it to have each of the 3 dropdowns set with the closest-matching dynamic value once someDynamicArrayOfValues is set.

推荐答案

我认为，这将是很好的它，你将使用 NG-选项属性选择标记。这是一个角度指令，它根据选择Array创建选项。您可以在选择文档
结果
如果您使用code - 你的函数 myFunctionForDeterminingWhetherValueIsSelected 工作两次，在每一个初始化选项，一次每个选项的项目，当你选择一些其他选项

I think that it will be good it you will use ng-options attribute of select tag. It's an angular directive which creates options according to Array of options. You can take a look at select documentation
If you use your code - your function myFunctionForDeterminingWhetherValueIsSelected works twice for every option at initialization and once for every option item when you select some another option.

演示，您可选择可以在的说明，请参见选择指令。

Demo for select you could see at description of select directive.

起初，看到当值被改变 - 你需要使用的 NG-变化属性选择标签，像这样的：

At first, to see when value is changed - you need to use ng-change attribute of select tag, like this:

<select ng-model="mySelectedValue" 
  ng-options="myValue for myValue in someDynamicArrayOfValues"
  ng-change="myFunctionForDeterminingWhetherValueIsSelected()">
  <option value="">--</option>
</select>

然后，我不知道如何 myFunctionForSettingSelectedValue 的样子，但也有2种型号：

Then, i don't know how does myFunctionForSettingSelectedValue look like, but there are 2 variants:

• 此函数返回一定的价值 - 那么你需要使用 NG-INIT 接下来方式

• This function returns some value - then you need to use ng-init next way.

控制器：

  $scope.someInitFunc = function () {
    return 'One';
  };

HTML

<select ng-model="mySelectedValue" 
      ng-options="myValue for myValue in someDynamicArrayOfValues"
      ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
      ng-init="mySelectedValue = someInitFunc()">
      <option value="">--</option>
</select>

• 您在此功能中设置 mySelectedValue 的价值 - 那你这样做


• You set value of mySelectedValue in this function - then you do this.

控制器：

$scope.someInitFunc = function () {
  $scope.mySelectedValue = 'One';
};

HTML

<select ng-model="mySelectedValue" 
  ng-options="myValue for myValue in someDynamicArrayOfValues"
  ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
  ng-init="someInitFunc()">
  <option value="">--</option>
</select>

我已经创建了一个实现使用 NG-INIT 的第一个版本的例子。当选择了新的价值 - 它打印到控制台

I have created an example which implements the first version of using ng-init. When new value is selected - it's printed to console.

另外，我选择移动到 options.json 文件。所以选项初始化Ajax请求结束之后。一切都很正常。

Also, i moved options to the options.json file. So options are initialized just after ajax request was finished. Everything works great.

您好一次。我想，你不需要有任何根据您的要求NG-INIT 。当HTTP请求完成后你可以开始你的模型的值。此外，我不明白为什么你们需要在这种情况下 NG-变化功能。

Hello again. I think you don't need to have any ng-init according to your requirements. You can just initiate values of your model when http request is finished. Also i don't understand why do you need ng-change function in this case.

下面c您从您那里普拉克的 NG-模型的价值观被加载选项之后开始需要被修改$ C $。

Here is modified code you need from your plunk where values of ng-models are initiated after options are loaded.

JavaScript的：

.controller('MainCtrl', function($scope, $http) {
  $scope.someStaticArrayOfValues = ['One', 'Two', 'Three'];
  $scope.mySelectedValues = {};
  $http.get('options.json').then(
    function (response) {
      $scope.someDynamicArrayOfValues = response.data;
      for (var i = 0; i < $scope.someStaticArrayOfValues.length; ++i) {
        $scope.someDynamicArrayOfValues.some(function (value) {
          if (value.substring(0, $scope.someStaticArrayOfValues[i].length) === $scope.someStaticArrayOfValues[i]) {
            $scope.mySelectedValues[$scope.someStaticArrayOfValues[i]] = value;
            return true;
          }
        });
      }
    },
    function (response) {
      console.log('ERROR!');
    }
  );
});

HTML：

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <div ng-show="someDynamicArrayOfValues">
      <ul>
        <li ng-repeat="staticValue in someStaticArrayOfValues">
          {{staticValue}} - 
          <select ng-model="mySelectedValues[staticValue]" 
            ng-options="myValue for myValue in someDynamicArrayOfValues">
            <option value="">--</option>
          </select>
          <h2>{{mySelectedValues[staticValue]}}</h2>
        </li>
      </ul>
    </div>
  </body>

这篇关于我如何获得一个选择标记的NG-模型来获得最初选择的选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！