Question

我在侧边栏上有一个复选框列表，用于分面导航，当屏幕宽度很小时隐藏此侧边栏，它是一个响应式设计，然后有一个按钮来制作offcan身边栏（完全相同）出现。我当前的代码是这样的，方面是不同的权重：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li ng-repeat="attr in layout.facettes.weight">
  <input id="facet1" class="checkbox-custom" type="checkbox" ng-selected="{{attr.isSelected}}">
  <label for="facet1" class="checkbox-custom-label">
    {{attr.Label}}
  </label>
</li>

＆＃13;

标签是刻面的标签：10kg，20kg，30kg等。 facet对象如下：

facettes {
    weight  : [{"Label" : "10kg",IsSelected : false },{...}],
    length : [{...},{...}]
}

侧边栏的html代码在layout.cshtml中通过RenderPartial包含两次，一个用于小屏幕视图，一个用于其他尺寸..

标签为＆＃34;＆＃34;有一个问题是使侧边栏的第二个实例运行良好。所以我尝试使用角度ng-select来处理复选框问题：我只能点击第一个复选框，第二个复选框拒绝工作。我认为复制HTML代码并不好，但是要实现相同的结果呢？还有更好的选择吗？

Answer 1

我不确定你要做什么，但这是我目前所理解的代码

git clone ssh://user@host:port/path/to/folder

jsfiddle

Answer 2

由于Angular中存在双向绑定，因此我可以使重复的HTML元素具有与原始HTML相同的值，反之亦然。 ckecbox无法在复制的HTML复选框上工作的原因是标签元素的属性。仅涉及第一个复选框。所以我删除了标签元素中的属性，并且由于Angular绑定，它们的状态保持同步。

                <li ng-repeat="valueAttr in attr.Values">
                <div ng-click="valueAttr.IsSelected = !valueAttr.IsSelected">
                    <input class="checkbox-custom" type="checkbox" ng-checked="valueAttr.IsSelected">
                    <label class="checkbox-custom-label">
                        {{valueAttr.Label}}
                    </label>
                </div>
            </li>

请务必记住，Angular负责视图和模型之间的同步，如果没有这种机制，解决方案就不会那么简单。

如何处理Angular

2 个答案: