Question

编码相关复选框/选择的最佳方法是什么。例如，切换复选框根据其他复选框状态进行状态，依此类推。

例如，我需要在用户更改选择时更改某些字段用户选择食物类型，我想要三个领域成为糖果类型或茶类型。

我应该这样做吗？

数组如：

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

将select定义为

<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">

通过这种方式，据我所知，所有依赖关系都将由角度处理，我认为有什么好处？但代码很难理解。

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

以角度方式执行此类操作的最佳代码实践是什么？

Answer 1

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

不，在您的情况下，您不需要$watch。 ng-model（作为Angular的一大优势）将为您完成这项工作。我们在这里有3个输入，其中包含基于ng-model所选项目的不同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"
        }

如果我理解正确（你的问题太全球化），你会尝试做类似的事情：演示 Fiddle

<强> 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];

编码依赖的输入或形式的元素

1 个答案: