摹刻

.y{
background-color: red;
}
.t{
background-color: mediumspringgreen;
}
.tip{
color: red;
}

        <select name="" ng-model="orderkey">
            <option value="">--按要求排序--</option>
            <option value="playtime">上映时间正序</option>
            <option value="-playtime">上映时间倒序</option>
            <option value="price">价格正序</option>
            <option value="-price">价格倒序</option>
        </select>
        <input type="button" id="" value="添加" onclick="add()" ng-click="isaddshow=!isaddshow"/>
        <input type="button" id="" value="批量删除" ng-click="delmore()" />
    </div>

    <table border="1" cellpadding="10" cellspacing="0">
        <tr style="background-color: gray;">
            <th><input type="checkbox" id="" onclick="qx()"></th>
            <td>编号</td>
            <td>名称</td>
            <td>类别</td>
            <td>时长</td>
            <td>导演</td>
            <td>售价</td>
            <td>上映时间</td>
            <td>评分</td>
            <td>操作</td>
        </tr>

        <tr ng-repeat="x in movies|filter:{name:key}|orderBy:orderkey"
            class="{{$index%2==0?'y':'t'}}">
            <td><input type="checkbox" id="" value="{{x.id}}"</td>
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
            <td>{{x.type}}</td>
            <td>{{x.time}}</td>
            <td>{{x.director}}</td>
            <td>{{x.price|currency:"￥"}}</td>
            <td>{{x.playtime|date:"yyyy-MM-dd"}}</td>
            <td>{{x.score}}</td>
            <td>
                <input type="button" id="" value="修改" ng-click="upd(x.id)" />
                <input type="button" id="" value="删除" ng-click="del(x.id)" />
            </td>
        </tr>
    </table>

    <div>
        <ul ng-show="isaddshow" style="list-style: none;">
        <li>
            编号:
            <input type="text" id="" value="" ng-model="aid" />
            <span class="tip" id="id_tip"></span>
        </li>

        <li>
            名字:
            <input type="text" id="" value="" ng-model="aname" />
            <span class="tip" id="name_tip"></span>
        </li>

        <li>
            类别:
            <input type="text" id="" value="" ng-model="atype" />
            <span class="tip" id="type_tip"></span>
        </li>

        <li>
            时长:
            <input type="text" id="" value="" ng-model="atime" />
            <span class="tip" id="time_tip"></span>
        </li>

        <li>
            导演:
            <input type="text" id="" value="" ng-model="adirector" />
            <span class="tip" id="director_tip"></span>
        </li>

        <li>
            售价:
            <input type="text" id="" value="" ng-model="aprice" />
            <span class="tip" id="price_tip"></span>
        </li>

        <li>
            上映时间:
            <input type="date" id="" value="" ng-model="aplaytime" />
            <span class="tip" id="playtime_tip"></span>
        </li>

        <li>
            评分:
            <input type="text" id="" value="" ng-model="ascore" />
            <span class="tip" id="score_tip"></span>
        </li>

        <li>
                <input type="button" id="" value="保存" ng-click="add()" />
        </li>
    </ul>
    </div>


    <div ng-show="isupdateshow">
        <ul>
            <ul style="list-style: none;">
        <li>
            编号:
            <input type="text" id="" value="" ng-model="mid" />

        </li>

        <li>
            名字:
            <input type="text" id="" value="" ng-model="mname" />


        <li>
            类别:
            <input type="text" id="" value="" ng-model="mtype" />

        </li>

        <li>
            时长:
            <input type="text" id="" value="" ng-model="mtime" />

        </li>

        <li>
            导演:
            <input type="text" id="" value="" ng-model="mdirector" />

        </li>

        <li>
            售价:
            <input type="text" id="" value="" ng-model="mprice" />

        </li>

        <li>
            上映时间:
            <input type="date" id="" value="" ng-model="mplaytime" />

        </li>

        <li>
            评分:
            <input type="text" id="" value="" ng-model="mscore" />

        </li>

        <li>
                <input type="button" id="" value="保存" ng-click="update()" />
        </li>
    </ul>
        </ul>
    </div>


    <script type="text/javascript">
        function qx(){
            var cbs=$("td [type=checkbox]");
            cbs.each(function(){
                if(this.checked){
                    this.checked=false;
                }else{
                    this.checked=true;
                }
            })
        }



        var app = angular.module("myapp",[]);
        app.controller("myctrl",function($scope){
            $scope.movies=[{id:1,name:"喜剧之王",type:"喜剧,人生",time:"120分钟",director:"周星驰",price:35.9,playtime:1450000949001,score:9.6},
                            {id:2,name:"狼牙",type:"动作,犯罪",time:"125分钟",director:"吴京",price:40,playtime:1511000949001,score:9.7},
                            {id:3,name:"麻辣隔壁",type:"喜剧,大学",time:"90分钟",director:"李洪绸",price:30,playtime:1516000949001,score:9.8},
                            {id:4,name:"大话西游",type:"动作,爱情",time:"100分钟",director:"周星驰",price:30.9,playtime:1511000949001,score:9.9},
                ];

                $scope.del = function(id){
                    if(confirm("确定要删除吗?")){
                        for (var i=0;i<$scope.movies.length;i++) {
                            $scope.movies.length[id]==[id];
                            $scope.movies.splice(i,1);
                            break;
                        }
                    }
                }

            $scope.delmore=function(){
                var cbs = $("td input:checked");
                if(cbs.length==0){
                    alert("至少选择一个");
                }else{
                    if(confirm("确定要删除吗?")){
                        cbs.each(function(){
                            for (var i=0;i<$scope.movies.length;i++) {
                                if($scope.movies[i].id==$(this).val()){
                                    $scope.movies.splice(i,1);
                                    break;
                                }
                            }
                        })

                    }
                }

            }


                $scope.add = function(){
                    $(".tip").text("");

                    var newdata={};
                    newdata.id=$scope.aid;
                    newdata.name=$scope.aname;
                    newdata.type=$scope.atype;
                    newdata.time=$scope.adirector;
                    newdata.price=$scope.aprice;
                    newdata.playtime=$scope.aplaytime;
                    newdata.score=$scope.ascore;




             $scope.movies.push(newdata);

            $scope.isaddshow=false;

            }

                var updateData;

            $scope.upd=    function(id){
                $scope.isupdateshow=true;

                for(var i=0;i<$scope.movies.length;i++){
                    if($scope.movies[i].id==id){
                        updateData=$scope.movies[i];
                        $scope.mid=$scope.movies[i].id;
                        $scope.mname=$scope.movies[i].name;
                        $scope.mtype=$scope.movies[i].type;
                        $scope.mtime=$scope.movies[i].time;
                        $scope.mdirector=$scope.movies[i].director;
                        $scope.mprice=$scope.movies[i].price;
                        $scope.mplaytime=$scope.movies[i].playtime;
                        $scope.mscore=$scope.movies[i].score;
                        break;
                    }
                }
            }

            $scope.update=function(){
                updateData.id=$scope.mid;
                updateData.name=$scope.mname;
                updateData.type=$scope.mtype;
                updateData.time=$scope.mtype;
                updateData.director=$scope.mdirector;
                updateData.price=$scope.mprice;
                updateData.playtime=$scope.mplaytime;
                updateData.score=$scope.mscore;

                $scope.isupdateshow=false;
            }
        })
    </script>

</body>

var update;
                $scope.upd=function(id){
                    for(var i=0;i<$scope.movies.length;i++){
                        if($scope.movies[i].id==id){
                            update=$scope.movies[i];
                            break;
                        }
                }
                var data=prompt("请输入要修改的票价",update.price);
                if(data!=null){
                    update.price=data;
                }
            }