今天完成的事：

学习ng-click 之前自己看了好久好久终于有点懂了（感觉自己好蠢）task4马上就能完成了

明天要做的事：

完成task4，开始task5

收货：

‍‍ng-click和ng-hide 通过绑定实现显示和影藏的效果

1. ‍‍<div ng-app="" ng-init="click=false">
2.      <buttonng-click="click= !click">隐藏/显示</button>
3.    <div ng-hide="click">
4.        请输入一个名字：<input type="text" ng-model="name" />
5.        Hello <span ng-bind="name"></span>
6.    </div>
7. </div>‍‍‍‍

主要用到了ng-init初始化 ng-click点击事件 和ng-hide  逻辑是通过true / false 来像开关一样进行判断

然后要实现task4中点击不同盒子弹出刀的效果 就需要在ng-click中带上参数

用ng-repeat 批量生成各种控件是很方便的事情，各种控件的点击事件（包括参数传递）也是可以批量生成的。 
例如：下面的例子就用ng-repeat绑定了一个按钮、一张图片，都能响应。

<div ng-repeat='item in items'>  <button ng-click="showItemId(item.id)">{{item.name}}</button>  <a ng-click="showDetail(hotel.id)"><img ng-src='{{item.src}}'/></a></div>

$scope.showItemId = function(itemId){        alert("Item Id 是 "+itemId);//显示的事被点击的item的序号 };

要注意的是蓝色的itemId和红色的item.id没有任何关系 也就是说上面ng-click传递的参数在下面蓝色的

地方可以写随意的值  代表的含义是上面红色的item.id ‍‍比如写成下面效果是一样的‍‍

‍‍$scope.showItemId = function(a){      

  alert("Item Id 是 "+a);//显示的事被点击的item的序号

 };‍‍

最后在任务中是通过ng-click来改变选中元素的ng-class

<div class="big-boxer" ng-repeat="role in total track by $index">
    <div class="small-boxer"
         ng-click="clickRole($index)">
        <div class="box-up" ng-class="{changeBac:$index==isClick}">{{role}}</div>
        <div class="box-bottom">{{$index+1}}</div>
    </div>
    <img src="../image/dao.png"
         class="dao"
         ng-class="{click:$index==isClick}">
</div>

$scope.clickRole=function(a){
   console.log(a)//显示点击的是第几个盒子
    $scope.isClick=a;
    $scope.changeBac=a;
}

.click{
   opacity:1;
}

.changeBac{
    background-color: #83b07a;
}

参考链接：http://www.angularjs.cn/A0s4

      `https://segmentfault.com/q/1010000005360848

感觉自己对dom的理解太浅了，需要补一波