Question

我对angularjs的select指令有一个问题。

这是我的代码：

<ul class="thumbnails">
    <li class="span4" ng-repeat="product in productsDTO">
        <div class="thumbnail">

        ...
        ...
        ...


        <div class="span4" ng-repeat="varCat in product.varietyCategoriesAndOptions">
            {{varCat.varietyCategoryName}}
            <br />

            <br /><br />

            <select ng-model="varCat.varietyCategoryOption" ng-options="varietyCategoryOptionTransfer.varietyCategoryOptionId as varietyCategoryOptionTransfer.varietyCategoryOptionValue for varietyCategoryOptionTransfer in varCat.varietyCategoryOptions">
                <option value="">Select color</option>
            </select>

        </div>

        ...
        ...
        </div>
    </li>
</ul>

我有一个$ http调用，返回json，它被添加到本地范围。

function getProductsByCategoryIdServiceCall(CategoryService, categoryId){
          CategoryService.getProductsByCategoryId(categoryId).success(function(data){
              $scope.productsDTO = data;
          }).error(function(data){
                  $scope.productsDTO = null;
          });
      }

所以基本上我有一组从webservice调用返回的json对象，我将本地$ scope设置为具有那些json对象，productsDTO的第一个迭代标记遍历新填充的对象。

每个产品都有一个单独的对象，显示该产品的特殊类别，以及这些类别的选项。我试图将select标签绑定（ng-model）到varCat对象。这是当前正在迭代的那个，以及同样包含我尝试为select标签指令设置的类别的选项数组的对象。我在varietycategory对象上添加了一个名为varietycategoryoption的特殊字段，专门用于保存该特定选择类别的当前状态。我这样做是因为每页可能有很多这样的类别选择，而且不知道有多少，所以我不能只是硬编码到页面中。

它似乎无法正常工作。有没有人有任何建议？

所有json都有很多数据，但这里是产品中json返回的一部分，其中包含与选择框关联的所有值：

"varietyCategoriesAndOptions":{"1":{"varietyCategoryId":111,"varietyCategoryName":"color","varietyCategoryOptions":{"202":{"varietyCategoryOptionId":202,"varietyCategoryOptionValue":"red"},"203":{"varietyCategoryOptionId":203,"varietyCategoryOptionValue":"blue"}},"varietyCategoryOption":null}}

的的 ** 更新的 * ** * ** * ** * ** * ** * *** 用户Chandermali说我正在处理我的数据以数组格式，当它是对象格式时。 Chandermali说使用这种格式

(key, value) in product.varietyCategoriesAndOptions

我在选择

中尝试了这个

<select ng-model="varCat.varietyCategoryOption" ng-options="(varietyCategoryOptionTransfer.varietyCategoryOptionId, varietyCategoryOptionTransfer.varietyCategoryOptionValue) in varCat.varietyCategoryOptions">
       <option value="">Select color</option>
  </select>

得到了这个错误：

 Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? 
 for (_key_,)?_value_ in _collection_' but got 
 'varietyCategoryOptionTransfer.varietyCategoryOptionId, 
 varietyCategoryOptionTransfer.varietyCategoryOptionValue in 
 varCat.varietyCategoryOptions'.

Answer 1

select标签中的这一变化足以让它适合我。

      <select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions">
            <option value="">Select color</option>
     </select>

我只是在select指令上使用了错误的格式来访问我的对象图。现在正在使用数据填充选择框。非常感谢你的耐心等待。

Answer 2

看到您的json，varietyCategoriesAndOptions或varietyCategoryOptions都不是数组。这些是对象图。您需要使用对象映射的语法，如

表达式中的
（键，值） - 其中键和值可以是任何用户定义的标识符，表达式是给出的范围表达式集合以进行枚举。

For example: (key, value) in product.varietyCategoriesAndOptions

在ng-repeat中，AngularJS选择标记不填充对象数据

2 个答案: