问:我注意到边框和边距存在一些问题,这是由于工作区代码的 css 中的一两个小错别字造成的。
答:代码可能与 Huston 在本课中所做的不完全相同。那是因为工作区中的 CSS 有一个小错别字。当他谈到我们的 action 元素的边距问题时,他向我们展示了一个规则,但在他的代码副本中,类与我们在工作区中的类有些不同。这是一个小错别字。只需转到 main.css,您就会看到一条规则,说明如下:
. 列表 。项。编辑 。动作 {
边距顶部:17像素;}
我们需要做的就是添加“-item”,以便我们定位正确的类,如下所示:
. 列表 。项。编辑项 。动作 {
边距顶部:17像素;}
并且您的 ng-class 声明将正常工作。
此外,休斯顿似乎在完成的代码和我们正在构建的代码之间跳来跳去,所以我认为他错过了我们需要从标签元素中删除“编辑标签”类,否则我们仍然会得到编辑边框框从 CSS 规则应用,即使我们没有编辑。继续并从 label 元素中删除类,您的 HTML 标记应如下所示:
< h1 ng-click = "helloWorld()" >我的TODO </ h1 >
< div ng-controller = "mainCtrl" class = "list" > < div class = "item" ng-class = "{'editing-item ':editing}" ng-repeat = "todo in todos" > < input ng-model = "todo.completed" type = "checkbox" /> <标签ng-hide = “编辑” ng-click =
"helloWorld()" > <!--您的代码在这里有一个“编辑标签”类。去掉它-->
{{todo.name}} </ label >
< input ng-blur = "editing = false" ng-show = "editing" ng-model = "todo.name" class = "editing-label" type = "text" /> < div class = "actions" > < a href = "" ng-click = "editing = !editing"
<一个 HREF = “” NG-点击=的“HelloWorld()” >保存</一>
<一个HREF = “”类= “删除” >删除</一> </ DIV > </ DIV > </ DIV >
这应该允许在您显示和取消显示输入和标签时默认切换应用边框(编辑标签)的类,并且应该让您在本课结束时快速了解。快乐编码!