Angular js 종합적인 운용방법에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Angular js 종합적인 운용방법에 대한 자세한 설명

小云云

Jan 20, 2018 pm 03:02 PM

angular javascript 상해

이 글은 주로 Angular js의 사용자 추가, 비밀번호 변경, 민감한 단어, 드롭다운 메뉴 등의 종합적인 조작 방법을 소개하고 있으니, 도움이 필요한 친구들이 참고하시면 좋겠습니다.

저번 글에서 편집자님이 AngularJS 퍼지 쿼리 기능(컨텐츠 드롭다운 메뉴 정렬, 민감한 문자 필터링, 검증 및 판단 후 테이블 정보 추가) 구현 코드를 소개해주셨는데요, 오늘은 소개해드리겠습니다. 사용자 추가, 비밀번호 변경, 민감성을 구현하는 Angular js 단어와 드롭다운 메뉴의 포괄적인 작동 방법, 구체적인 내용은 다음과 같습니다.

더 이상 말도 안 되는 소리는 하지 마세요. 구체적인 코드는 다음과 같습니다. 다음:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table{
      border-collapse: collapse;
    }
    th,td{
      padding: 10px;
      border: 1px solid #000000;
    }
  </style>
  <script src="../angular-1.5.5/angular.min.js"></script>
  <script>
    var myapp = angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
       $scope.data = [{
         "id":1,
         "name":"张三",
         "pwd":"123",
         "age":22,
         "sex":"男",
         "check":false
       },
         {
           "id":2,
           "name":"李四",
           "pwd":"456",
           "age":33,
           "sex":"男",
           "check":false
         },
         {
           "id":3,
           "name":"王五",
           "pwd":"789",
           "age":44,
           "sex":"女",
           "check":false
         }];
      $scope.show = false;
       //添加用户
      $scope.add = function () {
        $scope.show = true;
      }
        //添加
        $scope.submit = function () {
          if($scope.name==""){
            alert("请输入姓名")
          }else if($scope.correct==true){
            //进行修改的操作
            $scope.data[$scope.index].pwd = $scope.pwd;
          }else{
            //添加的操作
            $scope.data.push({"name":$scope.name,"pwd":$scope.pwd,"age":$scope.age,"sex":$scope.sex});
            $scope.show = false;
          }
      }
      //用户名查询。不能含有敏感字
      $scope.search = "";
      $scope.search2 ="";
      //监听输入框的内容
      $scope.$watch("search",function (value) {
        if(value.indexOf("我")!=-1){
          alert("含有敏感字");
          $scope.search = "";
        }else{
          $scope.search2 = $scope.search;
        }
      });
      //年龄筛选
      $scope.opt = "请选择";
      $scope.ageFilter = function (item) {
        if($scope.opt!="请选择"){
          var opt = $scope.opt;
          var ageArr = opt.split("-");
          var max = ageArr[1];
          var min = ageArr[0];
          var age = item.age;
          if(age<min||age>max){
           return false;
          }else{
            return true;
          }
        }else{
          return true;
        }
      };
      //性别筛选
     $scope.sexthis = "请选择";
     $scope.sexFun = function (item) {
       if($scope.sexthis!="请选择"){
         //如果性别==男||性别==女
         if(item.sex==$scope.sexthis)
          {
           return true;
         }else{
           return false;
         }
       }else{
         return true;
       }
     }
      //全选
      $scope.checkAll = false;
      $scope.checkWhat = function () {
        if ($scope.checkAll == true) {
          for (var i = 0; i < $scope.data.length; i++) {
            $scope.data[i].check = true;
          }
        } else {
          for (var i = 0; i < $scope.data.length; i++) {
            $scope.data[i].check = false;
          }
        }
      };
      //反选
      var n = 0;
      $scope.checkIt =function (index) {
        console.log(index)
       if($scope.data[index].check==true){
          n++;
        }else{
          n--;
        }
        if(n==$scope.data.length){
          $scope.checkAll=true;
        }else{
          $scope.checkAll = false;
        }
      };
      //点击修改密码
      $scope.correct = function (index) {
        $scope.show = true;
        $scope.name = $scope.data[index].name;
        $scope.pwd = $scope.data[index].pwd;
        //写入一个状态值
        $scope.correct = true;
        //记录索引
        $scope.index = index;
      }
      //全部删除
      $scope.delAll = function () {
        $scope.data.length=0;
      }
      //批量删除
      $scope.del = function () {
        for(var i = 0;i<$scope.data.length;i++){
          if($scope.data[i].check ==true){
            $scope.data.splice(i,1);
            i--;
          }
        }
      }
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>用户信息表</h2>
<input type="text" placeholder="用户名查询" ng-model="search">
年龄<select ng-model="opt" ng-change="fun()">
  <option>请选择</option>
  <option>10-20</option>
  <option>20-30</option>
  <option>30-40</option>
</select>
性别<select ng-model="sexthis" ng-change="fun()">
  <option>请选择</option>
  <option>男</option>
  <option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<table>
  <thead>
  <tr>
    <th><input type="checkbox" ng-model="checkAll" ng-click="checkWhat()"></th>
    <th>id</th>
    <th>用户名</th>
    <th>密码</th>
    <th>年龄</th>
    <th>性别</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in data|filter:{name:search2}|filter:ageFilter|filter:sexFun">
    <td><input type="checkbox" ng-model="item.check" ng-click="checkIt($index)"></td>
    <td>{{$index}}</td>
    <td>{{item.name}}</td>
    <td>{{item.pwd}}</td>
    <td>{{item.age}}</td>
    <td>{{item.sex}}</td>
    <td><button ng-click="correct($index)">修改密码</button></td>
  </tr>
  </tbody>
</table>
<button ng-click="add()">添加用户</button>
<ul ng-show="show">
  <li>用户名<input type="text" placeholder="请输入用户名" ng-model="name"></li>
  <li>密码<input type="text" placeholder="请输入密码" ng-model="pwd"></li>
  <li>年龄<input type="text" placeholder="请输入年龄" ng-model="age"></li>
  <li>性别<input type="text" placeholder="请输入性别" ng-model="sex"></li>
  <li><button ng-click="submit()">提交</button></li>
</ul>
</body>
</html>

로그인 후 복사

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7457

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM

Angular.js는 동적 애플리케이션을 만들기 위해 자유롭게 액세스할 수 있는 JavaScript 플랫폼입니다. HTML 구문을 템플릿 언어로 확장하여 애플리케이션의 다양한 측면을 빠르고 명확하게 표현할 수 있습니다. Angular.js는 코드를 작성, 업데이트 및 테스트하는 데 도움이 되는 다양한 도구를 제공합니다. 또한 라우팅 및 양식 관리와 같은 많은 기능을 제공합니다. 이 가이드에서는 Ubuntu24에 Angular를 설치하는 방법에 대해 설명합니다. 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 ChromeV8 엔진 기반의 JavaScript 실행 환경입니다. Ub에 있으려면

Win11에서 관리자 권한을 얻는 방법에 대한 자세한 설명 Mar 08, 2024 pm 03:06 PM

Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.

Oracle SQL의 나누기 연산에 대한 자세한 설명 Mar 10, 2024 am 09:51 AM

OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM

Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다.

PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명 Mar 19, 2024 pm 04:33 PM

PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.

리눅스 시스템콜 system() 함수에 대한 자세한 설명 Feb 22, 2024 pm 08:21 PM

Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.

Linux 컬 명령에 대한 자세한 설명 Feb 21, 2024 pm 10:33 PM

Linux의 컬 명령에 대한 자세한 설명 요약: 컬은 서버와의 데이터 통신에 사용되는 강력한 명령줄 도구입니다. 이 글에서는 컬 명령어의 기본적인 사용법을 소개하고, 독자들이 명령어를 더 잘 이해하고 적용할 수 있도록 실제 코드 예제를 제공할 것입니다. 1. 컬이란 무엇인가? 컬은 다양한 네트워크 요청을 보내고 받는 데 사용되는 명령줄 도구입니다. HTTP, FTP, TELNET 등과 같은 다중 프로토콜을 지원하며 파일 업로드, 파일 다운로드, 데이터 전송, 프록시와 같은 풍부한 기능을 제공합니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

See all articles

Angular js 종합적인 운용방법에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제