所以,我正在解决一个关于 ngInclude
中的 ngOptions
指令的错误。我遇到了显示指令工作的示例代码,将其复制粘贴进去,然后看到我的(未运行的)旧 ngOptions
现在正在运行。我很好奇它是如何工作的。
我无法再访问旧代码,但它看起来像这样:
HTML:
<div ng-controller="Widget" ng-class="{{widget.properties.styleClass}}" ng-init="optionsShow = false" class="irrelevant" "style = "height:100%;" >
<div>
<!-- ... -->
<!-- my options button-->
<span class="icon" ng-click="showOptions(); adjustHeight()">
options
</span>
</div>
<!-- Options div shows only when button is clicked -->
<!-- Canvas Options -->
<div class="options command-options" ng-show="optionsShow" style="height:50%;">
<!-- ... -->
<span ng-click="addCommand()">Add New Command +</span>
<div class="row">
<div class="col-xs-3">
<label>Command to edit:<br/>
<select ng-model="selected" ng-change="verifySelected()" ng-options="object as object.index for object in widget.objects"></select>
<!-- The select here wouldn't show any options no matter what I did -->
</label>
</div>
</div>
</div>
<!-- ... -->
JS,在 Controller 内:
//...
$scope.widget.objects = [];
//...
$scope.addObject = function(){
$scope.widget.objects.push({index:$scope.widget.objects.length + 1, type:$scope.objectTypes[0]});
}
$scope.addObject();
$scope.verifySelected = function(){
console.log("irrelevant")
}
工作的 HTML 现在看起来像这样:
<div ng-controller="Widget" ng-class="{{widget.properties.styleClass}}" ng-init="optionsShow = false" class="irrelevant" "style = "height:100%;" >
<div>
<!-- ... -->
<!-- The following comments help make thing work in the options div. Don't ask why, I don't know. Just don't remove them
<b>Total Things:</b> {{totalThings}}
<p ng-repeat="oneThing in things">
<input value="{{oneThing.text}}" type="checkbox" ng-model="oneThing.checked" />
{{oneThing.text}}
</p>
<ul class="unstyled">
<li ng-repeat="oneThing in things">
<span>{{oneThing.text}}</span>
</li></ul>-->
<!-- my options button, everything below this point unchanged-->
<span class="icon" ng-click="showOptions(); adjustHeight()">
options
</span>
</div>
<!-- Options div shows only when button is clicked -->
<!-- Canvas Options -->
<div class="options command-options" ng-show="optionsShow" style="height:50%;">
<!-- ... -->
<span ng-click="addCommand()">Add New Command +</span>
<div class="row">
<div class="col-xs-3">
<label>Command to edit:<br/>
<select ng-model="selected" ng-change="verifySelected()" ng-options="object as object.index for object in widget.objects"></select>
<!-- The select here wouldn't show any options no matter what I did -->
</label>
</div>
</div>
</div>
<!-- ... -->
工作的 JS Controller 现在也有这些行:
$scope.totalThings = 5;
//...
$scope.things = [{text: 'This is needed in order to make things work... for some reason.'}];
发生了什么让它起作用?
最佳答案
ngOptions 与您的旧代码一起按预期工作,我用您的旧代码做了一个 plunker widget plunker添加了 $scope.widget = {};
和 $scope.objectTypes = ["something"];
以使您的代码正常工作。
关于javascript - 注释使 ng-options 起作用,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37639718/