0

编码依赖复选框/选择的最佳方法是什么。例如根据其他复选框状态切换复选框状态等。

例如，当用户更改选择用户选择食物类型时我需要更改一些字段，我希望三个字段成为糖果类型或茶类型。

我应该做这样的事情吗？

数组如：

foods_data: 
            {
                type: "sweets",
                food1: "chocolates",
                food2: "candies",
                food3: "cakes"
            },
            {
                name: "teas",
                food1: "black",
                food2: "green",
                food3: "red"
            }

定义选择为

<select ng-model="food_select"
ng-options="food as food.name for food in foods_data"
name="food_select" class="input"></select>

并设置 3 个字段 ng-models 依赖于 select，如下所示：

//field1
<input id="food1" class="input" type="text" ng_model="food_select.food1">
//field2
<input id="food2" class="input" type="text" ng_model="food_select.food2">
//field3
<input id="food3" class="input" type="text" ng_model="food_select.food3">

这样，据我了解，所有依赖项都将由 Angular 处理，我认为有什么好处？但是代码很难理解。

或者我最好将 $watch 函数添加到控制器并在其中应用字段依赖项？

用角度做这些事情的最佳代码实践是什么？

4

1 回答 1

2

或者我最好将 $watch 函数添加到控制器并在其中应用字段依赖项？

不，在你的情况下你不需要$watch. （作为 Angular的ng-model一大优势）将为您完成这项工作。我们这里有 3 个输入，其ng-models 基于ng-options所选项目。

您发布的模型 ( foods_data: {..}) 将难以维护，因为每个项目都有不同的结构：type: "sweets",和name: "teas". 决定你喜欢什么，name或者types创建一些通用的东西，比如：

foods_data: 
        {
            type: {
                  name:"sweets"
                  },
            food1: "chocolates",
            food2: "candies",
            food3: "cakes"
        },
        {
            type: {
                   name:"teas"
                  },
            food1: "black",
            food2: "green",
            food3: "red"
        }

如果我理解正确（您的问题太全球化），您可以尝试执行以下操作：DemoFiddle

HTML

 <select ng-model="selectedItem"
ng-options="selectedItem as selectedItem.type.name for selectedItem in foods_data"
 class="input"></select>

    <input id="food1" class="input" type="text" ng_model="selectedItem.food1">
<input id="food2" class="input" type="text" ng_model="selectedItem.food2">
<input id="food3" class="input" type="text" ng_model="selectedItem.food3">

当控制器

 $scope.foods_data =[ 
            {
        type: {
              name:"sweets"
              },
        food1: "chocolates",
        food2: "candies",
        food3: "cakes"
    },
    {
        type: {
               name:"teas"
              },
        food1: "black",
        food2: "green",
        food3: "red"
    } ];

    $scope.selectedItem = $scope.foods_data[0];
于 2013-10-19T12:00:27.973 回答