Question

我不是很精通AngularJS，只是在学习过程中学习。我遇到了一个问题，我真的希望有人能够帮助我。情况就是这样

我有一个HTML表单（viewDetails.html），当前正在显示一个具有多个值的下拉框。通过在定义的$ scope列表上使用 ng-options 通过控制器文件（detailsController.js）获得这些值。现在我的目标是，如果$ scope列表的长度小于或等于1，则HTML应该显示一个文本框而不是下拉框。我的代码如下，

viewDetails.html

<div class="form-group">
            <label for="manufacturerCode" class="col-sm-4 control-label">Manufacturer Code</label>
            <div class="col-sm-8">
                <select ng-disabled="disabledParameter('manufacturerCode')" ng-model="firmware.manufacturerCode" ng-if="config.testing" ng-options="item for item in config.manufacturers" id="manufacturerCode" name="manufacturerCode" class="form-control" required>

                </select>
            </div>
        </div>

detailsController.js

$scope.manufacturers = []; // This is used by HTML to populate dropdown list
$scope.testing = true;    
var moremanufacturers = false;

// manufacturerCodes is populated from the database
if(manufacturerCodes.length > 1) {
   moremanufacturers = true;
   $scope.testing = moremanufacturers;
} else {
   moremanufacturers = false;
   $scope.testing = moremanufacturers;
}

任何帮助将不胜感激！非常感谢，并期待一些问题或答案。

Answer 1

var app = angular.module('app', []);


app.controller('mainCtrl', function ($scope) { 
$scope.abc=[{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];
$scope.enable=false;

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>


<div ng-app=app>
<div ng-controller="mainCtrl">
Test
    <select ng-show="abc.length>1" ng-model="selectedName" ng-options="abc.id as abc.name for abc in abc "/>
    <input ng-show="abc.length<1" type="text" />
</div>
</div>

根据$ scope值AngularJS在下拉菜单和文本输入之间切换

1 个答案: