为什么Angular默认不选择正确的选择选项？

我们有一个选择的标签是这样的：为什么Angular默认不选择正确的选择选项？

<select id="nonemployeeSelect" 
     ng-model="data.nonEmployeeCase.nonEmployeeId"> 
    <option ng-repeat="nonemployee in data.nonemployees" 
      ng-value={{nonemployee.id}} ng-selected="{{nonemployee.id == @ViewBag.nonempId}}"> 
     {{nonemployee.organization.displayValue}} 
    </option> 
</select>

NG-模型结合在角控制器这样初始化的属性：

$scope.data.nonEmployeeCase = {}; 
$scope.data.nonEmployeeCase.nonEmployeeId = 1;

NG重复是从非员工对数组范围：

$scope.data.nonemployees

所以对于选择HTML最终看起来像这样：

<select id="nonemployeeSelect" ng-model="data.nonEmployeeCase.nonEmployeeId" class="ng-pristine ng-untouched ng-valid ng-not-empty"> 
     <!-- ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="1" ng-selected="false" class="ng-binding ng-scope" value="number:1" selected="selected"> 
      Office of the Administrator 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="2" ng-selected="false" class="ng-binding ng-scope" value="number:2"> 
      Office of Women’s Health 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="3" ng-selected="true" class="ng-binding ng-scope" value="number:3"> 
      Office of Budget 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="4" ng-selected="false" class="ng-binding ng-scope" value="number:4"> 
      Office of the Administrator 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="5" ng-selected="false" class="ng-binding ng-scope" value="number:5"> 
      Division of Budget Execution and Management 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="6" ng-selected="false" class="ng-binding ng-scope" value="number:6"> 
      Division of Program Budget Services 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --> 
    </select>

因此，在上面的第三个选项有“ng-selected == true”，所以我们ng选定的表达式正常工作。

而且我们给了我们ng值（1,2,3,4,5,6）的nonemployee.id中的ng值。而且我们将ng-model绑定到控制器中的“data.nonEmployeeCase.nonEmployeeId”。如果我更改选择选项，它会更新模型值。大。

问题在于ng-value应该在工作中被选中，以便在加载执行时立即选择正确的表达式并更新模型。但事实并非如此。它从“data.nonEmployeeCase.nonEmployeeId”中获取模型值并使用它设置正确的选项。

这对我在其他地方工作，但不在这里工作。有没有人看到这个问题？任何想法？

它似乎只是在反向工作。而不是ng-value和ng-selected一起工作来选择正确的选项标签然后更新模型，模型正在初始化所选的选项。之后，您可以选择其他选项并更新模型。太棒了。但我们需要以其他方式进行初始化。

来源

2017-04-25 Sam

为什么不使用ng选项？这有什么理由吗？或者只是你不知道？ –

[Angular JS select with manual options]的可能副本（http://stackoverflow.com/questions/14900497/angular-js-select-with-manual-options） – georgeawg

我不知道为什么这种方法不适合我，就好像它在其他地方一样。但我在Option标签上用ng-init修复了它。

<select id="nonemployeeSelect" 
     ng-model="data.nonEmployeeCase.nonEmployeeId"> 
    <option ng-repeat="nonemployee in data.nonemployees" 
      ng-init="nonemployee.id == @ViewBag.nonempId ? data.nonEmployeeCase.nonEmployeeId = nonemployee.id : null" 
      ng-value={{nonemployee.id}}> 
     {{nonemployee.organization.displayValue}} 
    </option> 
</select>

来源

2017-04-25 20:31:24 Sam

的文件警告说，ng-selected不应与select指令和ng-model指令中使用。

注：ngSelected不与select和ngModel指令进行交互，它只是设置元素的属性selected。如果在选择上使用ngModel，则不应在选项上使用ngSelected，因为ngModel将设置选择值和选定选项。

— AngularJS ng-selected Directive API Reference

有关详细信息，请参阅

来源

2017-04-25 22:32:05 georgeawg

为什么Angular默认不选择正确的选择选项？

回答

相关问题