Javascript 有逻辑地重复

我有这个东西

recipe = {
    name : $scope.name,
    ingredients : $scope.ingredients
}

我以两种不同的方式保存

成分

，即

ingredients1 = [{ingredient : 'berry'}, {ingredient : 'honey'}]
ingredients2 = ['berry', 'honey'];

在ng重复中，我需要根据情况选择过去的成分

//ingredients1
<li ng-repeat="ingr in recipe.ingredients track by $index">
    <b>{{ingr}}</b>
</li>

//ingredients2
<li ng-repeat="ingr in recipe.ingredients track by $index">
    <b>{{ingr.ingredients}}</b>
</li> 

//ingredients1

{{ingr}}

//ingredients2

{{ingr.配料}

---

对于这两种情况，我是否可以使用一些条件语句，例如

if

或

else

？

如果定义了

ingr.component

，则绑定它，否则绑定

ingr

，即：

请尝试使用以下代码：

angular.module（'myApp'，[]）
.controller（'MyCtrl'，函数（$scope，$http）{
var myScope=this；
myScope.components=[{
成分：“浆果”
}, {
成分：“蜂蜜”
}“浆果”、“蜂蜜”]；
})

{{！！ingr.component？ingr.component:ingr}

如果你知道你永远不会有第三个变体，你可以这样做

<li ng-repeat="ingr in recipe.ingredients track by $index">
  {{ingr.ingredient || ingr}}
</li>

{{ingr.component | | ingr}}

然而，这并不是那么可维护的。我认为将此逻辑委托给助手函数可能更简洁

<li ng-repeat="ingr in getIngredients(recipe.ingredients)">
  {{ingr}}
</li>


function getIngredients(ingredients) {
  // Logic to flatten your mix of objects and strings
}

{{ingr}}

功能性成分（成分）{
//将对象和字符串的组合展平的逻辑
}

---

这将允许您添加/更改配方成分的模型，同时还可以创建可以单独进行单元测试的逻辑。

有两种方法，所有方法都在下面列出。 这是一个

数组1

{{ingr.component | | ingr}}

阵列2

{{ingr.component？ingr.component:ingr}

阵列3

{{ingr.component | | ingr}}


{{ingr.component？ingr.component:ingr}

什么情况？在哪里？我不知道你想做什么：）实际上，你甚至可以把它简化为{{ingr.component | | ingr}}。

<li ng-repeat="ingr in getIngredients(recipe.ingredients)">
  {{ingr}}
</li>


function getIngredients(ingredients) {
  // Logic to flatten your mix of objects and strings
}

angular.module('myApp',[])
.controller('myCtrl', function($scope){
  $scope.array1 = [{ingredient : 'berry'}, {ingredient : 'honey'}]
  $scope.array2 = ['berry', 'honey'];
  $scope.array3 = [{ingredient : 'berry'}, {ingredient : 'honey'}, 'berry', 'honey'];
});