Question

所以，我正在处理ngOptions中有关ngInclude指令的错误。我看到示例代码显示该指令正在工作，将其复制粘贴，并看到我的（无功能）旧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，在控制器中：

//...
$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控制器现在也有以下几行：

$scope.totalThings = 5;
//...
$scope.things = [{text: 'This is needed in order to make things work... for some reason.'}];

让它发挥作用的是什么？

Answer 1

ngOptions与您的旧代码一起按预期工作，我使用旧代码widget plunker SELECT和$scope.widget = {};添加了一个用于使您的代码正常工作的插件。

评论使ng-options有效，为什么？

1 个答案: