标签: angularjs-ng-options

我有一个选择使用ng-options填充选择如下:

<select class="form-control" 
   ng-model="Data.selectedPerson" 
   ng-options="v as (v.Name ) for v in Data.people track by v.Name">
</select>

如果人员集合为空或者尚未选择任何值,我不希望为集合添加默认值.我想在select中有一个提示,鼓励他们使用select.谢谢你的建议.

http GET方法的响应JSON如下所示

 [
    {
        "1": "Open"
    },
    {
        "2": "Expired"
    }
]

如何在角度js的选择下拉框中绑定此数据.我试过这个选项:

<select class="form-control" ng-model="selected" ng-options="item for item in data"> 
<option value="">----Select----</option> 
</select>

但是我在下拉列表中得到[object,object].

我有一个自定义指令,我正在<select ng-options="">用这样的装饰......

<select custom ng-model="selected" ng-options="o for o in values">

用custom我的指令,并values成为一个简单的数组.这是我的实施......

<select custom ng-model="selected" ng-options="o for o in values">
    <option value selected>uhh?</option>
</select>

app.directive('custom', [function() {
    return {
        scope: {},
        link: function(scope, elem, attrs) {
            // how can I get my array of values here?
        }
    }
}])
app.controller('ctrl', ['$scope', function($scope) {
    $scope.values = ['er', 'um', 'eh'];
}])

link我可以在其中看到它

console.log(attrs.ngOptions);

在这种情况下,退出文字"o for o in values".我可以以某种方式解析或编译我的内容link以获取数组吗？如果我做了类似的事情scope.$parent.values,我发现我可以抓住它,但这似乎是不必要的,我需要知道它的名字"values".我可以通过一些hacky感觉字符串操作来定位它,但我希望有一种更直观的方式. …

我有一个视图,其中包含用于过滤报表的下拉列表.我还有一个显示为链接的已保存过滤器的视图.当用户点击他们保存的过滤器时,我希望选择适当的下拉列表值.下降正在适当填充.在保存的过滤器链接上有一个ng-click将调用一个函数,该函数遍历已保存过滤器值的集合并自动选择正确的过滤器值.我无法弄清楚如何以编程方式设置所选的选项.任何帮助深表感谢!

<select uid="locSelect" 
        class="span12" 
        ng-model="reportDetail.selectedLoc" 
        ng-options="loc.dbid as loc.serviceName for loc in reportDetail.locList | orderBy:'name'">
    <option uid="unselectedLocOption" value="">-- Select One --</option>
</select>

以下是已保存过滤器的列表:

<div class=" well fixed-search" style="overflow-x: hidden;overflow-y: auto;">
<div class="well-header">
    Saved Filters
</div>
<div ng-if="!hasSavedFilters">
    <span>No saved filters</span>
</div>
<ul ng-if="hasSavedFilters" class="nav nav-list dashboard-list">
    <li ng-repeat="filter in reportDetail.savedFilters">
        <a uid="savedFilter" href="" ng-click="reportDetail.loadSavedFilters(filter.filters)">
            <span ng-bind="filter.title"></span>
        </a>
    </li>
</ul>

这是我的控制器

(function(){
'use strict';

var ReportDetailController = function(ReportsService, $scope){
    var _locList = {};
    var _hospitalStatusList = {};
    var _providerStatusList = …

ngModel对输入类型文本的工作方式是否不同并选择？未选择选择控件以反映初始模型值.

当我更改select,input和currentUser.field的值也会改变,但如果我将输入文本的值更改为另一个键,则没有任何选择.

{{currentUser.field}} // show correct field field key (number) val

// ng-model works => show correct field key (number) val
<input ng-model="currentUser.field" type="text" /> 

// <option value="?" selected="selected" label=""></option> is selected
<select ng-model="currentUser.field" 
   ng-options='item.key as item.value for item in currentUser.collections.field '>
</select>

// only works with input text and {{currentUser.field}}
 <button ng-click='currentUser.field = 305'>select field (int)</button>
 <button ng-click='currentUser.field = "305"'>select field (string)</button>

我正在制作我正在制作的项目中的播放列表选项,我正在尝试获取列表中所有视频的下拉列表.

这很容易

<select ng-options="vid.Id for vid in playList.Videos track by video.Id" ng-model="selected" class="browser-default"></select>

但这显示了Id的下拉,但现在我希望它显示列表中的位置+1;

因此,当播放视频5/15时,下拉列表应显示1到15(因此不是0到14),应选择5.

关于如何实现这一点的任何想法？

我在选择指令中使用ngOptions像

<select class="form-control" ng-model="users.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>

我在控制器中设置默认值

$scope.users.jobTitle = $scope.ds.jobTitle[0];

ds是一个具有数组jobtitle的json：

"jobTitle":[
  {"id":1,"value":"Service1"},
  {"id":2,"value":"Service2"},
  {"id":3,"value":"Service3"}
],

现在我正在保存并获得结果（控制台）

jobTitle:Object
       $$hashKey:"object:173"
       id:1
     value:"Service1"

现在，当我进行编辑时，像这样输入服务呼叫数据

$scope.useredit.jobTitle = data.jobTitle;

对于

<select class="form-control input-sm" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>
</select>

它没有将对象设置为selected，而是在第一个选项中设置了null值。我该怎么办？

我有一个包含数百个选择元素的表单.当用户保存表单时,我将保存JSON,当他们重新加载时,使用JS代理将其拉回.我正在寻找一个好的/干净的方式来从JSON中的值设置选项值.最好不要为这些中的每一个枚举数组,并根据它与值匹配的索引进行设置.

的jsfiddle

模板:

<div ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="jsModel.selVal"ng-options="myVal.value for myVal in myValArr"/>
</div>

app.js:

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

function myCtrl($scope) {
  $scope.myValArr = [{ value: 'Yes' }, { value: 'No' }]; 
  $scope.jsModel = ({ selVal: 'Yes' }); // Returned from proxy call
}

我在使用angularJs的选择框中遇到ng-model问题.模型值未在控制器功能中更新.但是,它确实反映了当选择框放在主模板中时控制器的更改,而不是当它放在指令模板中时.

在main.html中正常工作

<select ng-model="selectedGuest" id="guests-sel"
    ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')" 
    ng-options="guest as guest.value for guest in guests track by guest.key">
 </select>

这是 main.html

<div ng-init="init()">
    <div class="content-wrapper">

        <div ng-if="selTemplate == 'tourism'">
            <!-- Does not work reflect changes when changedin this directive template -->
            <search-results-tourism></search-results-tourism>
        </div>
        <!--  Select Box ng-model value reflects in controller when placed here, 
           but not in directive template -->
        <select ng-model="selectedGuest" id="guests-sel"  ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')" 
           ng-options="guest as guest.value for guest in guests track by guest.key">
       </select> 

    </div>
</div>

在指令模板中不起作用.之前我使用ng-include作为模板,但我认为这是因为ng-include创建的新范围,所以我用指令替换它但仍然没有任何想法.？ …

HTML:

<label for="country">Country *</label>
 <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
                ng-change="GetSelectedCountry()">
 <option value=''>Select</option>
</select>    
 <label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
         ng-change="GetSelectedState()"><option value=''>Select</option>
 </select>
  <label for="city">City *</label>
 <select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>
  Select</option>
<option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>
 </select>

JS:

$scope.countries = {

                'USA': {
                    'Alabama': ['Montgomery', 'Birmingham'],
                    'California': ['Sacramento', 'Fremont'],
                    'Illinois': ['Springfield', 'Chicago']
                },
               'India': {
                    'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                    'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                    'Rajasthan': ['Jaipur', 'Ajmer', …