Javascript 使用AngularJS'使用select；s ng选项

我在其他帖子上读到过，但我想不出来

我有一个数组

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

我希望将其呈现为：

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

芝加哥
纽约
华盛顿

我还想选择ID=000002的选项

---

我已经阅读并尝试过了，但我想不出答案。

需要注意的一点是，ngModel是ngOptions工作所必需的。。。请注意

ng model=“blah”

，它表示“将$scope.blah设置为所选值”

试试这个：

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

注意：如果碰巧将
foo
正确初始化为“falsy”，这可能会有点疯狂。在这种情况下，很可能需要在控制器中处理
foo
的初始化

自定义默认选项：

这有点不同；在这里，您只需添加一个选项标记作为select的子项，并使用空值属性，然后自定义其内部文本：

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>


未选择任何内容

注意：在这种情况下，“空”选项将保留在那里，即使您选择了其他选项。AngularJS下的selects的默认行为并非如此

进行选择后隐藏的自定义默认选项：

如果希望自定义默认选项在选择值后消失，可以向默认选项添加ng hide属性：

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]


选择要删除我的内容。
我正在学习AngularJS，也在努力选择。我知道这个问题已经得到了回答，但我还是想分享更多的代码

在我的测试中，我有两个列表框：汽车品牌和汽车模型。在选择某个品牌之前，“型号”列表处于禁用状态。如果以后重置了makes列表框中的选择（设置为“选择Make”），则模型列表框将再次禁用，其选择也将重置（设置为“选择模型”）。make作为资源检索，而模型只是硬编码的

使JSON：
services.js：
HTML文件：
在咖啡脚本中：

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]


有时创建自己的指令要容易得多

出于某种原因，AngularJS让我感到困惑。他们在这方面的记录非常糟糕。欢迎提供更多变化的好例子

无论如何，我对Ben Lesh的答案有一点不同

我的数据收集如下所示：

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

现在

这个问题已经得到了回答（顺便说一句，Ben提供了非常好和全面的答案），但我想添加另一个完整性元素，这可能也非常方便

在Ben建议的示例中：

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>



已使用以下表单：
选择作为数组中值的标签

Label是一个表达式，其结果将是
元素的标签。在这种情况下，您可以执行某些字符串连接，以获得更复杂的选项标签

示例：


ng options=“item.ID as item.Title+'-'+item.ID for items in items”
为您提供类似
Title-ID
ng options=“item.ID as item.Title+”（“+item.Title.length+”）用于项中的项“
提供类似于
Title（X）
的标签，其中
X
是标题字符串的长度

您也可以使用过滤器，例如


ng options=“item.ID作为item.Title+”（“+（item.Title |大写）+”）对于items中的item“
提供类似于
Title（Title）
的标签，其中Title属性和Title的Title值是相同的值，但转换为大写字符
ng options=“item.ID as item.Title+”（“+（item.SomeDate | date）+”）对于items中的item“
如果您的模型具有属性
SomeDate
，则为您提供类似
Title（2015年9月27日）
的标签
如果您需要每个选项的自定义标题，
ng options
不适用。使用带有选项的
ng repeat
：

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>


{{item.Title}
我希望以下内容对您有用

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

它可能很有用。绑定并不总是有效的

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}

事实证明，这些是值的索引，这就是angular允许您使用对象作为选择框的值的方式。Angular在幕后用选择框为您做了很多事情，您不必担心选项的值属性。他们网站上的“选择”下有文档：“…ngModel是ngOptions工作所必需的…”是我遇到的问题的关键。回答得好。是否可以避免第一个空选项（
）？我正在尝试使用最后一个案例（一个自定义的默认选项，在进行选择后隐藏），但我发现了一些问题。我不得不使用
ngif=！foo
在选择其他选项时隐藏默认的空选项。此外，默认的空选项始终显示在组合列表的底部。我怎么能把它放在组合列表的开头呢？亲爱的随机用户。虽然这个问题及其答案相当简单，但您将代码组织到其适当和各自的位置（控制器、服务、模板、数据）以最简单和默认的形式展示了AngularJS的优雅。很好的例子。这不是它的用途
ng model
应指向范围上的另一个变量，与
make
无关。看到@DmitriZaitsev中的例子，我认为你错了，仅仅因为angular docs的例子显示了你描述的方式并不意味着这是唯一的方式。告诉我们为什么你认为它不应该用这种方式，而不是对新手的一个很好的例子进行垃圾处理。不要忘记你的
parseInt
的
radix
：这个答案似乎正是这个问题所要问的。其他每个答案都告诉读者不要担心生成了什么HTML，但我
items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}