Question

我对Angular很新，所以我可能会发现这一切都错了......

我有一个＆lt; select＆gt;类似于以下内容：

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

这大部分都有效...下拉列表最初会选择正确的选项，如果我更改所选的选项，那么mySelectedValue将获得新的选择。但是，mySelectedValue未获得最初 - 选中的选项。在我更改下拉列表中的值之前，mySelectedValue为空。

我查看了ng-init，但似乎在设置someDynamicArrayOfValues之前进行了评估...

我有没有办法让mySelectedValue接收最初选择的＆lt;选项＆gt;中的值？

的 更新：
我忘了提到我还尝试过使用ng-options，但是没有任何运气可以与确定选择哪个选项一起工作。

我试过这个：

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

但这些都不起作用，因为构建了select（并且ng-init和ng-selected都被评估）在 someDynamicArrayOfValues之前已经设置，因此，在＆lt;选择＆GT;甚至可见。使用<option ng-repeat="...">时，＆lt; select＆gt;在设置 someDynamicArrayOfValues之后之前，不会构建/初始化，这就是我一直朝那个方向发展的原因。

有没有办法让ng-options技术工作，同时让select取决于someDynamicArrayOfValues（如果ng-options是更好的方法）？

更新2 ：
这是一个Plunker（从ababashka的答案修改而来），它更接近我最终想要实现的目标：http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=preview。它还不完全......我希望在设置someDynamicArrayOfValues后，将3个下拉列表中的每一个设置为具有最接近匹配的动态值。

Answer 1

我认为您使用ng-options标记的select属性会很好。它是一个角度指令，可根据选项数组创建选项。你可以看一下select documentation
如果您使用代码 - 您的函数myFunctionForDeterminingWhetherValueIsSelected在初始化时为每个选项工作两次，在您选择其他选项时为每个选项项工作一次。

使用您的代码进行演示：http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview

您可以在select指令的描述中看到选择的演示。

更新

首先，要查看值何时更改，您需要使用ng-change标记的select属性，如下所示：

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

然后，我不知道myFunctionForSettingSelectedValue是怎样的，但有两种变体：

此函数返回一些值 - 然后您需要使用ng-init下一步。

Controller:

  $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的值 - 然后执行此操作。

Controller:

$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的第一个版本的示例。选择新值时 - 将其打印到控制台。

此外，我将选项移至options.json文件。所以选项在ajax请求完成后初始化。一切都很好。

演示：http://plnkr.co/edit/pzjxxTnboKJXJYBGcgNb?p=preview

更新2

再次问好。我认为根据您的要求，您不需要ng-init。您可以在http请求完成时启动模型的值。另外我不明白为什么在这种情况下你需要ng-change函数。

以下是您需要修改的代码，其中加载选项后会启动ng-model s的值。

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

演示：http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview

Answer 2

这是一个按预期工作的修改过的plunker：http://plnkr.co/edit/Y8OSvmrG3u0XjnCU3ah5?p=preview。

主要变化是使用ng-if代替ng-show。这会迫使角度重新编译/链接html，无论何时渲染：

<div ng-if="someDynamicArrayOfValues">
...
</div>

此外，不需要从原始的plunker进行ng-change，并且还有一些拼写错误。

Answer 3

当你在select元素上使用ng-options而不是使用ng-repeat的嵌套选项时，效果会好很多。

https://docs.angularjs.org/api/ng/directive/select

然后您可以使用ng-init设置ng-model。

Answer 4

您可以尝试在控制器中设置mySelectedValue的初始值，如下所示：

$scope.mySelectedValue = '';

Answer 5

我在plnkr中为您的问题创建了示例。访问：plnkr.co/edit/rKyjijGWSL1IKy51b8Tv?p=preview

Answer 6

你正在以相反的方式去做。 ng-model反映了<select>的状态，并且是双向约束的。

您只需将mySelectedValue设置为您想要的<select>首先选择，而不需要其他技巧。

因此，在控制器中，执行以下操作：

$scope.mySelectedValue = someDynamicArrayOfValues[0];

从ng-selected中删除<option ng-repeat...>和<select>：

<select ng-model="mySelectedValue" 
        ng-options="value for value in someDynamicArrayOfValues">
    <option value="">--</option>
</select>

如何获取选择标记的ng-model以获得最初选择的选项？

6 个答案:

使用您的代码进行演示：http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview

更新

更新2

演示：http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview