36

我是 AngularJS 的初学者，目前我正在 Django 中开发一个 Web 应用程序，我可以说我使用 AngularJS 作为前端部分。我的问题是填充范围内对象的下拉列表始终以空白元素开头（如果我从列表中选择一个，问题就消失了）。这会产生问题，因为如果用户没有选择任何 POST 请求通常它将不再工作。我想知道如何拥有类似预选值或类似的东西。这是我的代码的一部分：

选择标签：

<select id="sel" class="input-block-level" ng-model="list_category">
            <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
            <option value="Other">Other</option>
        </select>

$scope.list_categories：

var listcategoryPromise = ListCategory.get();
    listcategoryPromise.then(function(response) {
        $scope.list_categories = {
            meta : response.data.meta,
            data : response.data.objects
        };
    });
4

6 回答 6

59

使用该指令ng-options并value从“其他”选项中删除，如下所示：

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">    
    <option value="">Other</option>
</select>

这确保如果list_category为空（未选择条目），则选择“其他”选项（默认情况下）。

jsFiddle：http: //jsfiddle.net/bmleite/gkJve/

于 2013-02-05T12:35:20.527 回答
5

在下面找到下面的工作示例，您应该避免使用选项 ng-repeat 所以请参阅下面的示例代码

<body ng-controller="testcontroller">
         <select ng-model="item" ng-options="item.ID as item.Title for item in items">
         </select>
            <span>{{item}}</span>
    </body>

App.controller('testcontroller', function ($scope) {
    $scope.item = '000001';
    $scope.items = [
      { ID: '000001', Title: 'Chicago' },
      { ID: '000002', Title: 'New York' },
      { ID: '000003', Title: 'Washington' }
    ];
});
于 2013-02-05T12:34:26.347 回答
3

<select>您可以对带有 Angularjs的标签使用特定语法。

灵感来自文档页面：

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
    <option value="Other">Other</option>
</select>
于 2013-02-05T12:34:43.693 回答
2

下面是一些直接来自 AngularJs.org 网站的关于选择列表的代码：

<select ng-model="color" ng-options="c.name for c in colors"></select>

首先，如您所见，您不需要使用 ng-repeat 来构建您的选项列表。Angular 基本上会让你foreach在一个集合上做一个循环来构建你的选项列表。其次，您有选择中的 ng-model，但与您的集合名称不同。这将是您在发布时实际收集的物品。

function MyCntrl($scope) {
   $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red
}

好的，这是 javascript 控制器代码。$scope.colors是集合，$scope.color是模型属性，已分配给 html 中的选择列表。从这个例子可以看出，模型属性被赋予了数组中第三个选项的默认起始值​​。对您来说，这可以从您用于初始加载页面的 http.get 进行设置。

现在，当您执行 foreach 时，您基本上是从集合中获取“名称”值，并在下拉列表中说“显示此值”并在帖子中使用此值。通过设置初始模型属性，您应该能够避免下拉列表中出现空选项字段。

参考：AngularJS 选择

于 2013-02-05T12:35:06.997 回答
2

在我看来，这个答案更干净：

$scope.form = {type : $scope.typeOptions[0].value};

http://jsfiddle.net/MTfRD/2010/

于 2015-08-05T11:10:55.753 回答
0

如果您设置ng-model了一些未包含在ng-Repeat. 现在，如果您考虑原始帖子并删除ng-model或设置一些有效值ng-model，它将正常工作，或者您可以将选定的第一项设置为 

$scope.list_category = $scope.list_categories.data[0].id;
于 2016-01-18T06:05:07.827 回答