当对象位于不同的作用域时，使用ng-重复中的项来表示select元素的ng模型？

Question

我有一个目标：

$scope.recipe = 
  {
  ...,
  "ingredients": [
    {
      "foodItem": "Cabbage",
      "condition": "Chopped",
      "amount": "3 cups"
    },
    {
      "foodItem": "Carrot",
      "condition": "Grated",
      "amount": ".5 cups"
    },
    {
      "foodItem": "Rice Wine Vinegar",
      "condition": "",
      "amount": ".25 cups"
    },
    {
      "foodItem": "Sesame Seed Oil",
      "condition": "",
      "amount": "3 tablespoons"
    }
  ],
  ...
}

我正在使用ng-重复为上面的对象(或者我选择的任何配方)中的每个成分创建一个选择下拉列表。

我还有另一个目标：

$scope.foods = 
[
  {
    "name": "Baking Powder",
    "_id": "pJ7ERDIbL9QTDRPn"
  },
  {
    "name": "Beef",
    "_id": "e9HWiXFflHTuwHHP"
  },
  {
    "name": "Bread",
    "_id": "2fFCSMJRYURINLrE"
  },
  {
    "name": "Butter",
    "_id": "SiSryQYOkvUDoxix"
  },
...
]

这是我将使用的选项，为每一个下拉，是创建ng-重复。我希望在每个选择下拉列表中使用每个foodItems作为默认选择(使用ng模型)。基于其他这样的帖子，我已经阅读过，这似乎适用于在ng-重复中使用ng-模型的输入元素，但不适用于在ng-重复中使用ng-model和ng-选项的select。有没有办法通过选择来做到这一点？

html：

<!-- TODO Add a directive to this div element so that it repeats 
    for each recipe ingredient to display. -->
  <div class="ingredient-row" ng-repeat="item in recipe.ingredients">
    <div class="prefix-20 grid-30">
      <p>
        <!-- TODO Add directives to this select element to bind its value 
          to the recipe ingredient model's `foodItem` property and to 
          populate the list with the food items from the database. -->
        <select ng-model="item.foodItem" ng-options="food.name for food in foods">
          <option value="">Select Item</option>
        </select>
      </p>
    </div>
    <div class="grid-30">
      <p>
        <!-- TODO Add a directive to this input element to bind its value 
          to the recipe ingredient model's `condition` property. -->
        <input type="text" value="{{item.condition}}">
      </p>
    </div>
    <div class="grid-15">
      <p>
        <!-- TODO Add a directive to this input element to bind its value 
          to the recipe ingredient model's `amount` property. -->
        <input type="text" value="{{item.amount}}">
      </p>
    </div>
    <div class="grid-5 pad-top">
      <p class="flush-right">
        <!-- TODO Add a directive to this anchor element so that you can 
          delete the recipe ingredient when the user clicks on the 'Delete' link. -->
        <a class="no-action-link"> <img src="images/delete.svg" height="12px"> </a>
      </p>
    </div>
  </div>

主计长：

.controller('RecipeDetailController', function($scope,dataService,$location) {

    const init = () => {
      let id = $location.path();
      id = id.slice(6);
      let category;
      console.log(id);

      dataService.getID(id,function(response) {
        $scope.recipe = response.data;
        $scope.title = response.data.name || 'Add New Recipe.';
        category = response.data.category;
      });

      dataService.getAllCategories(function (response) {
        $scope.categories = response.data;
        let index = response.data.findIndex(item => item.name === category);
        if (index === -1) {
          $scope.initial = {"name": "Choose a Category"};
        } else {
          $scope.initial = $scope.categories[index];
        }
      });

      dataService.getAllFoodItems(function (response) {
        $scope.foods = response.data;
      });
    }

    $scope.addIngredient = () => {
//      console.log($scope.recipe);
      let ingredient = '';
      $scope.recipe.ingredients.push('');
    };

    $scope.ingredientDetails = function(ingredient) {
      if (ingredient === null) {
        $scope.condition = '';
        $scope.amount = '';
      } else {
        $scope.condition = ingredient.condition;
        $scope.amount = ingredient.amount;
      }
    };

    $scope.cancelChanges = () => {
      $location.path('/');
    }

    init();

  });

Answer 1

我为您的HTML创建了一个简化的柱塞，并使用静态数据重新创建了您的场景(并更改了数据，使$scope.recipe.ingredients中的值与$scope.foods中的值匹配)。

在您的示例中，您使用的ng-options表单仍然试图将值赋值为对象而不是字符串。这将创建一个输出HTML，如下所示：

<option label="Cabbage" value="object:8">Cabbage</option>

通过稍微更改ng-options，我们可以获得所需的输出。

<select ng-model="item.foodItem" ng-options="food.name as food.name for food in foods">

产出如下：

<option label="Cabbage" value="string:Cabbage" selected="selected">Cabbage</option>

这种轻微的输出变化足以使角找到来自$scope.recipe.ingredients的字符串值匹配，并设置一个默认值。

http://plnkr.co/edit/3l1afYx4n4xRAlPuzWkZ?p=preview