【问题标题】:angular populate dropdown from object laravel来自对象laravel的角度填充下拉列表
【发布时间】:2016-01-17 13:47:01
【问题描述】:

您好,我正在使用 Angualr 来填充选择框,我正在获取标签列表,这些标签按如下方式组合在一起(我已经使用 Laravel 在 JSON 中编码,以便我可以以友好的格式输出它。) ;

要填充的努力选项

{
 "5. XS":{"94":"01:00:00"},
 "4. S":{"96":"02:00:00"},
 "3. M":{"98":"04:00:00"},
 "2. L":{"100":"07:00:00"},"
 1. XL":{"102":"16:00:00"},
"0. XXL":{"104":"38:00:00"},
"105":"Estimate Required"
} 

我还按如下方式回传所选的努力;

{"67","697"}

然后在角度我执行以下操作:

Planning.groom(id)
            .success(function (planning) {
                $scope.tasks = planningtasks;
                $scope.name = planning.name
                $scope.id = planning.id;
                $scope.auth = planning.auth;
                $scope.effortTags = planning.effort;                
            });

那么在我看来,我会做以下事情;

 <select ng-model="entity.selected_tags.effort"
         ng-options="effort for effort in effortTags.effort">
  </select>

但是我似乎无法显示选项,知道我做错了什么吗?

我希望使用选项组重新创建此下拉菜单,但某些选项可能没有选项组,它们本身可能是一个选项,如上面选项“所需估计”中所示;

我已经能够使用 Laravel 和 jQuery 做到这一点。

【问题讨论】:

  • 你在视图中做什么?看来编辑把那部分删掉了……
  • @NicBright 我已经格式化了我的问题,现在应该可以看到

标签: php angularjs laravel html-select


【解决方案1】:

您需要重构底层 JSON,例如像这样

$scope.effortTags = [
     { category: "5. XS", id: "94", value: "01:00:00" },
     { category: "4. S", id: "96", value: "02:00:00" },
     { category: "3. M", id: "94", value: "04:00:00" },
     { category: "2. L", id: "94", value: "07:00:00" },
     { category: "1. XL", id: "94", value: "16:00:00" },
     { category: "0. XXL", id: "94", value: "38:00:00" },
     { id: "105", value: "Estimate Required" }
  ];

然后你可以在模板中这样做:

<select ng-model="entity.selected_tags.effort"
         ng-options="effort as effort.value group by effort.category for effort in effortTags">
</select>

【讨论】:

  • 谢谢我已经这样做了,但现在只显示类别,我在选择中返回 [object object]
  • 例如
  • 即使我使用你粘贴的 $scope.effortTags 我也会返回这个对象,所以我按照你要求的方式构建了它
  • 你在某个地方有 plunkr/jsfiddle/jsbin/codepen 吗?
  • 啊好吧,对不起,我弄错了 ng-options 部分。看这里jsfiddle.net/cda0gu6y/3我也会更新答案
猜你喜欢
  • 2023-03-19
  • 1970-01-01
  • 2011-05-28
  • 1970-01-01
  • 1970-01-01
  • 2018-12-15
  • 1970-01-01
  • 1970-01-01
  • 2018-10-03
相关资源
最近更新 更多