标签: ng-options

对于我正在编写的指令的需要,我必须动态构造ng-options表达式.这是我试过的.

在我的指令中:

// ... scope.labelProperty = 'name';
scope.selectOptions = "l." + scope.labelProperty + " for l in list";

在我的html模板中:

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>

这导致ng-options采用正确的表达式"l.name for l in list"但选项不显示.

请问,任何想法？

这看起来应该很容易,但我是棱角分明的新手并没有很好地理解这个概念.我希望在数据集上运行ng-repeat,然后能够使用完全相同的数据集根据选择框中的选定选项过滤结果.

我创建了一个选项数组,并将它们分配给变量$ scope.OurTeamCategories.

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
   $scope.ourTeamCategories = [
        {"id":18,"title":'Management'},
        {"id":19,"title":'Administration'},
        {"id":21,"title":'Designers'},
        {"id":22,"title":'Accounts'},
    ]
}]);

然后在HTML文件中,我使用ng-options动态创建选择框,并使用ng-repeat创建这些类别的列表.这一切都很好,但现在我希望能够过滤

<div ng-app="app">
  <div ng-controller="Main">
    <select name="show-filter"  ng-model="catFilter" ng-options="category.title for category in ourTeamCategories">
          <option value="{{category.id}}"></option>
      </select>

  <li ng-repeat="cat in ourTeamCategories">
      <h3>{{cat.title}}</h3>
      <!-- for testing -->
     <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}}
  </li>
   </div>
</div>

我以为我可以通过以下方式运行过滤器,但是我收到了一个错误.谁能告诉我我做错了什么？

<li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}">

我在这里创建了一个plunker:http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8？p = preview

我可以在angularjs中设置一个默认值的下拉列表,

 <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
    <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
 </select>

我怎样才能实现相同的使用ng-options？我惶恐不安

 <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = option.id"  
   ng-options="option.name for option in data track by option.id">
</select>

但没用.样本小提琴就在这里

有没有人知道为什么在Angular中,如果没有ng-model,选择选择器不起作用？

<select ng-model="bla_bla" ng-options="obj.value as obj.key for obj in languages"/>
<select ng-options="obj.value as obj.key for obj in languages"/>

上面的第一行代码将起作用,而第二行代码将不起作用.为什么???

谢谢!

我目前正在开发Angular中的应用程序.到目前为止,一切都很顺利.对于棱角分明,我真的非常非常新,我很惊讶第一个真正的障碍花了这么长时间.

情况:

我有一个对象数组,每个对象都有一个订单.

category.items = [{id: 1, order: 1, type: {}, ...}, {id: 54, order: 2, type: {}, ...}, {id: 3, order: 3, type: {}, ...}]

用户需要能够重新排列这些项目.必须将新订单设置为对象属性"订单".

在html中,这些对象的呈现方式如下:

<div class="category">
    <div class="item" ng-repeat="(itemIndex, item) in category.items track by $index">
        <div class="header">
        </div>
    </div>
</div>

在header-div中我有一个输入字段,类型为select.

<select ng-model="item.order"  ng-change="changeItemOrder((itemIndex + 1), item.order, itemIndex)">
  <option ng-repeat="item in category.items" ng-value="($index + 1)">{{$index + 1}}</option>
</select>

changeItemOrder的代码:

$scope.changeItemOrder = function(old_order, new_order, item_index) {
    new_order = parseInt(new_order);
    if (old_order != new_order) {
        var …

我有一个填充的选择框ng-options.我知道您可以手动添加默认选项,如下所示:

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown"  id="address_dropdown">
    <option value="" ng-selected="selected">Add a new address</option>
</select> 

是否有任何方式(角度)添加多个选项？客户端现在希望使用第一个默认选项"从地址中选择",并在上面显示所有填充的选项后,将上面显示的"添加新地址"选项作为列表中的最后一个选项ng-options.

(我知道我可以使用jQuery添加该选项,但如果可能的话,宁愿保持所有角度.)

我正在尝试翻译选择下拉列表,我不喜欢我这样做的方式,因为它很麻烦,它绕过了整个角度转换框架.

区域设置数据看起来像{"lang":{"label":"text","select":{"k1":"var1","k2":"var2"}}}如果我选择"选择"在控制器范围内的成员,我可以在select的ng-options中写一些类似"k as for(k,v)in scopedvar"的内容.

基本上我喜欢翻译来做语言解决,然后开始退出并返回我的选项的本地化地图.如果它有意义,例如:"k为v(for,k,v)in'select'| translate",但当然不会.

有没有人面临(并解决)此问题？

TIA,Edoardo

我没有找到如何大写或大写的第一个字母ng-options.

我的选择:

<select ng-model="company.currency.code" ng-options="currency.code as currency.code for currency in currency_list>
</select>

在控制器中:

$scope.currency_list = [
    {
        code: 'eur'
    }, {
        code: 'usd'
    }
];

我想打印"EUR","USD"或"Eur","Usd"而不用手动循环我的对象.

这有可能吗？

我希望能解决三个问题......

在我的应用页面中,我有一个选择状态,另一个选择县.对于我所拥有的州:

<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>

数据:

[
  { state="California", stateID="5"},
  { state="Arizona", stateID="3"},
  { state="Oregon", stateID="38"},
  { state="Texas", stateID="44"},
  { state="Utah", stateID="45"},
  { state="Nevada", stateID="29"}
]

对于我的县选择我有:

<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
 </select>

数据:

[
  { county="Orange", countyID="191", co_state_id="5"},
  { county="Multiple Counties", countyID="3178", co_state_id="3"},
  { county="Sonoma", countyID="218", co_state_id="38"},
  { county="Los Angeles", countyID="190", co_state_id="44"}
]

这是我的ng-repeat:

<div ng-repeat="project in projects | filter:filter">
    <div>
        State: {{project.state}}<br> 
        County: {{project.county}}<br>
        <span …

在角度下拉列表中显示选定值时遇到问题.当我给这样的时候它起作用

$scope.selectedItem = $scope.items[1];

如果我直接给出那个价值,那就不行了

$scope.selectedItem = { name: 'two', age: 27 };

HTML:

<html ng-app="app">
  <body>
    <div ng-controller="Test">
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
    </div>
  </body>
</html>

JS:

var app = angular.module('app',[]);
app.controller('Test',function($scope){
   $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
  $scope.selectedItem = $scope.items[1];
});

CODEPEN: http ://codepen.io/anon/pen/zxXpmR

解:

谢谢samir-das.我根据你的建议修好了.

var choosen_value = { name: 'two', age: 27 };
angular.forEach($scope.items, function(item){
  if(angular.equals(choosen_value, item)){
    $scope.selectedItem = item; …