ngOptions

Question

我可以编写ng-repeat来迭代Django模型字段中的选项并显示它们吗？我该怎么做？我应该为此制作单独的API还是什么？

APPROVAL_CHOICES = (
        (u'Good condition', u'Good condition'),
        (u'Bad condition', u'Bad condition'),
        (u'Broken', u'Broken'),
    )
status = models.CharField(max_length=20, choices=APPROVAL_CHOICES)

我有以下内容，但它不起作用：

<label>Statuss</label>
    <select>
         <option value="" selected>--Please select Inventory statuss--</option> 
         <option value="inventory.status[0]" >Good Condition</option>   
         <option value="inventory.status[1]" >Bad Condition</option>    
         <option value="inventory.status[2]" >Broken</option>   
    </select><br/>

这是我的API：

    objects: [
    {
        category: {},
        count: 1,
        created: "2014-02-24T16:07:12.903555",
        description: "Car description for image",
        id: 1,
        location: "IT nodala",
        name: "Baterija AA",
        resource_uri: "/api/v1/inventory/1",
        slug: "baterija-aa",
        status: "Good condition"
    },

Answer 1

使用像这样的重复

'<select data-ng-model="selectedField">' +
      ' <option data-ng-repeat="v in choices" value="v">v</option>' +
'</select> ' ;

Answer 2

我猜您的问题是关于如何使用select标记和角度js，您可以使用ngOption directive。来自AngularJS docs：

ngOptions

ngOptions属性可用于使用通过评估ngOptions comprehension_expression获得的数组或对象动态生成元素的元素列表。

当选择菜单中的项目时，所选选项表示的数组元素或对象属性将绑定到ngModel指令标识的模型。

...注意：当您希望将选择模型绑定到非字符串值时，ngOptions为元素提供了一个迭代器工具，应该使用该工具代替ngRepeat。这是因为选项元素目前只能绑定到字符串值。

使用此jsfiddles：

<body ng-app="demoApp">
  <div ng-controller="DemoController">
    <div>
      <h2>Incorrect</h2>
      <p>
        We might expect the select box to be initialized to "two,"
        but it isn't because these are two different objects.
      </p>
      <select
        ng-model="incorrectlySelected"
        ng-options="opt as opt.label for opt in options"
      >
      </select>
      The value selected is {{ incorrectlySelected.value }}.
    </div>
    <div>
      <h2>Correct</h2>
      <p>
        Here we are referencing the same object in <code>$scope.correctlySelected</code>
        as in <code>$scope.options</code>, so the select box is initialized correctly.
      </p>
      <select
        ng-model="correctlySelected"
        ng-options="opt as opt.label for opt in options"
      >
      </select>
      The value selected is {{ correctlySelected.value }}.
    </div>
  </div>
</body>

检查docs form more exmaples。

从django模型中选择选择

2 个答案:

ngOptions