angular 学习之路（一）学生信息管理

青旅半醒 2022-09-23 13:48 110阅读 0赞

# 学生管理 #

angularjs+ bootstrap

![这里写图片描述][20160719171722371]

智商不够犯的错  
1.基础语法没有熟练掌握

2.`$scope.users.push()` push 是个数组的方法

3.`$scope.delUser = function(id){ $scope.users[id-1].edit = false; $scope.users[id-1].del = false; <td ng-show="{ { user.del }}">`  
正确：  
4.$scope 依赖注入理解问题以及ng-x,作用域  
一个小小小问题，

<input type="text" ng-model="name" placeholder="">        
         <button  ng-click="editUser(user.id)" >                           $scope.users = [
     {id:1, name:'Hege', age:"22", 
     stuClass:"2", edit:true,del:true},
            是这样修改特定用户信息吗？ 
            **$scope.users[id].name= $scope.name;**

$scope.users[$scope.id -1].name= $scope.name;
            $scope.users[$scope.id-1].age =$scope.age;

index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="userCtrl">
    
    <div class="container">
        <h3>Student</h3>
        <table class="table .table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="user in users" ng-show="user.del ">
                <td>{
        { user.id }}</td>
                <td>{
        { user.name }}</td>
                <td>{
        { user.age }}</td>
                <td>{
        { user.stuClass }}</td>
                <td ng-show=" user.edit ">
                    <button class="btn  btn-success" ng-click="editUser(user.id)" >
                        <span class="glyphicon glyphicon-pencil"></span>编辑
                    </button>
                </td>
                <td ng-show="user.del ">
                    <button class="btn btn-danger" ng-click="delUser(user.id)">
                        <span class="glyphicon glyphicon-trash"></span>删除
                    </button>
                </td>
    
            </tr>
            </tbody>
        </table>
    
        <hr>
        <button class="btn btn-success" ng-click="editUser('new')">
            <span class="glyphicon glyphicon-user"></span>添加学生
        </button>
        <hr>
    
        <h3 ng-show="edit0">创建新用户:</h3>
        <h3 ng-hide="edit1">编辑用户:</h3>
    
        <form ng-hide="edit2" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">姓名:</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="name" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">年龄:</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="age" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">班级:</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="stuClass" placeholder="">
                </div>
            </div>
            <div class="form-group" ng-show="edit0">
                <div class="col-sm-2 col-md-offset-2">
                    <button class="btn btn-primary" ng-click="userInfo()">
                        <span class="glyphicon glyphicon-open"></span>提交
                    </button>
                </div>
            </div>
            <div class="form-group" ng-hide="edit1">
                <div class="col-sm-2 col-md-offset-2" >
                    <button class="btn btn-success" ng-click="resetUser()">
                        <span class="glyphicon glyphicon-save"></span>修改
                    </button>
                </div>
            </div>
        </form>
    </div>
    
    <script src="main.js"></script>
    
    </body>
    </html>

main.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
        
        $scope.Name = '';
        $scope.age = '';
        $scope.stuClass = '';
        $scope.users = [
            {id:1, name:'Hege', age:"22", stuClass:"2", edit:true,del:true},
            {id:2, name:'Kim',  age:"24", stuClass:"2", edit:true,del:true},
            {id:3, name:'Sal',  age:"43" , stuClass:"2",edit:true,del:true},
            {id:4, name:'Jack', age:"21" , stuClass:"2",edit:true,del:true},
            {id:5, name:'John', age:"24" , stuClass:"2",edit:true,del:true},
            {id:6, name:'Peter',age:"23" , stuClass:"2",edit:true,del:true}
        ];
        $scope.edit0 = false;
        $scope.edit1 = true;
        $scope.edit2 = true;
        $scope.setBtn = true;
        $scope.delBtn = true;
        //删除学生信息
        $scope.delUser = function(id){
        
            $scope.users[id-1].edit = false;
            $scope.users[id-1].del = false;
            $scope.users[id-1].id = '';
            $scope.users[id-1].name= '';
            $scope.users[id-1].age = '';
            $scope.users[id-1].stuClass = '';
    
        }
        //判断是新增学生还是修改信息
        $scope.editUser = function(id) {
        
            if (id == 'new') {
                $scope.edit0 = true;
                $scope.edit1 = true;
                $scope.edit2 = false;
                $scope.name = '';
                $scope.age = '';
            } else {
                $scope.edit0 = false;
                $scope.edit1 = false;
                $scope.edit2 = false;
                $scope.id = $scope.users[id-1].id;
                $scope.name = $scope.users[id-1].name;
                $scope.age = $scope.users[id-1].age;
                $scope.stuClass = $scope.users[id-1].stuClass;
            }
        };
        //新增用户信息提交显示
        var count=0;
        $scope.userInfo = function(id) {
        
               count++;
               $scope.id=count+6;
               console.log($scope.id);
               $scope.edit0 = false;
               $scope.edit2 = true;
               $scope.edit=true;
               $scope.del=true;
               $scope.newUser= [ $scope.id,$scope.name, $scope.age,$scope.stuClass, $scope.edit,$scope.del];
            $scope.users.push({id:$scope.newUser[0],name:$scope.newUser[1],age:$scope.newUser[2],stuClass:$scope.newUser[3],edit:$scope.newUser[4],del:$scope.newUser[5]});
    
        };
        $scope.resetUser = function(id){
        
            //$scope.users[id].id = $scope.id;
            console.log($scope.id);
            console.log($scope.name);
            $scope.users[$scope.id -1].name= $scope.name;
            $scope.users[$scope.id-1].age =$scope.age;
            $scope.users[$scope.id-1].stuClass = $scope.stuClass;
            $scope.edit2 = true;
        }
    });

[20160719171722371]: /images/20220720/cb436b38160d485492ec8cb91f901b6f.png