Переключение между выпадающим списком и вводом текста на основе значения $ scope AngularJS - PullRequest
Новая
       56

Переключение между выпадающим списком и вводом текста на основе значения $ scope AngularJS

0 голосов
/ 20 сентября 2019

Я не очень опытен в AngularJS, просто учусь по ходу дела.Я столкнулся с проблемой, с которой я действительно надеюсь, что кто-то сможет помочь мне.Вот ситуация,

У меня есть HTML-форма (viewDetails.html), в которой в настоящее время отображается раскрывающийся список с несколькими значениями.Эти значения получаются через файл контроллера (detailsController.js) с помощью ng-options поверх заданного списка $ scope.Теперь моя цель состоит в том, чтобы, если длина списка $ 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;
}

Любая помощьбудет с благодарностью!Большое спасибо и с нетерпением жду некоторых вопросов или ответов.

1 Ответ

0 голосов
/ 20 сентября 2019 

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