angular 学习之路(一)学生信息管理

学生管理

angularjs+ bootstrap

angular 学习之路(一)学生信息管理_第1张图片

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

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

3.$scope.delUser = function(id){
$scope.users[id-1].edit = false;
$scope.users[id-1].del = false;

正确:
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


<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>Studenth3>
    <table class="table .table-striped">
        <thead>
        <tr>
            <th>IDth>
            <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;
    }
});

你可能感兴趣的:(javascript)