Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.-JS 튜토리얼-php.cn

AngularJS 뷰 및 지시문 소개

AngularJS Commands

从模型中转义 HTML

条件渲染

过滤

집

웹 프론트엔드

JS 튜토리얼

Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.

青灯夜游

Sep 03, 2021 pm 06:22 PM

angularjs 지침 보다

이 기사는 Angularjs의 보기와 지침을 안내합니다. 도움이 되기를 바랍니다.

Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.

AngularJS 뷰 및 지시문 소개

첫 번째 기사에서 AngularJS가 애플리케이션을 뷰, 컨트롤러 및 모델(MVC)로 분할하는 방법을 살펴보았습니다. 이 글에서는 AngularJS 뷰를 생성하는 방법을 살펴보겠습니다. [관련 튜토리얼 추천: "angular Tutorial"]

시작하기 전에 먼저 이 글의 예제를 경험하는 데 사용할 수 있는 간단한 AngularJS 애플리케이션을 설정하겠습니다:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
      <span></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      //empty controller function
    });
  </script>

</body>
</html>

로그인 후 복사

AngularJS Commands

AngularJS Views mix 모델의 데이터를 HTML 템플릿으로 변환합니다. AngularJS 지시어 를 사용하여 AngularJS에 데이터를 HTML 템플릿에 혼합하는 방법을 알려줄 수 있습니다. 이 기사에서는 가장 일반적으로 사용되는 AngularJS 지시문을 다룰 것입니다.

Interpolation 지시어

Interpolation 지시어는 AngujarJS의 가장 기본적인 지시어 중 하나입니다. 보간 지시문은 표현식 결과를 HTML 템플릿에 삽입합니다. {{ }} 표기법을 사용하여 표현식을 삽입하려는 위치를 표시할 수 있습니다. 예는 다음과 같습니다. {{ }}符号标记插入表达式的位置。下面是一个例子：

<div ng-controller="MyController" >
    <span> {{myData.text}} </span>
</div>

로그인 후 복사

HTML 模板包含在div具有ng-controller 属性的元素中。HTML 模板内部是一个span元素，内部是一个插值指令。该指令指示 AngularJSmyData.text在给定位置插入数据值。

插值指令还可以插入从模型对象的函数返回的数据。下面是一个例子：

 <div ng-controller="MyController" >
      <span>{{myData.textf()}}</span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.textf = function() { return "A text from a function"; };
    });
  </script>

로그인 후 복사

在此示例中，插值指令{{myData.textf()}}将调用模型对象myData.textf()上的函数$scope，并将从该函数返回的文本插入到 HTML 模板中。

该textf()函数被插入到$scope.myData控制器函数内的对象中，如您在示例中所见。

ng-bind 指令

该ng-bind指令是插值指令的替代。您可以通过ng-bind在您希望 AngularJS 插入数据的 HTML 元素中插入一个属性来使用它。下面是一个例子：

<div ng-controller="MyController" >
  <span ng-bind="myData.textf()"></span>
</div>

로그인 후 복사

这会将myData.text()函数返回的数据插入到span元素的主体中。请注意属性{{ }}内的表达式周围的不是必需的ng-bind。

从模型中转义 HTML

如果从模型获得的数据包含 HTML 元素，则这些元素在插入 HTML 模板之前会被转义。转义意味着 HTML 显示为文本，而不是 HTML。

这样做是为了防止 HTML 注入攻击。例如，在聊天应用程序中，有人可能会<script>在聊天消息中插入带有 JavaScript的元素。如果此元素未转义，则任何看到聊天消息的人都可能会<script>执行该元素。随着 HTML 转义，<script> 元素将仅显示为文本。

您可以使用ng-bind-html-unsafe指令禁用 HTML 转义，如下所示：

<div ng-controller="MyController" >
  <span ng-bind-html-unsafe="myData.textf()"></span>
</div>

로그인 후 복사

在禁用 HTML 转义时，您应该非常小心。确保没有显示不受信任的 HTML。

条件渲染

AngularJS 可以根据模型中数据的状态显示或隐藏 HTML。您可以使用一组专门为此目的创建的 AngularJS 指令。我将在以下部分中介绍这些指令。

ng-show + ng-hide 指令

的ng-show和ng-hide指令用于显示或隐藏根据模型中的数据的HTML元素。这两个指令做同样的事情，但彼此相反。这里有两个例子：

  <div ng-controller="MyController" >
      <span ng-show="myData.showIt"></span>
      <span ng-hide="myData.showIt"></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.showIt = true;
    });
  </script>

로그인 후 복사

此示例创建两个span元素。一个有一个ng-show指令，另一个有一个ng-hide指令。这两个指令都查看myData.showIt 布尔变量以确定它们是否应该显示或隐藏span元素。该ng-show 指令将显示元素如果模型值为true，并隐藏元素如果模型值为false。该ng-hide指令将执行相反的操作：span

<div ng-controller="MyController" >
    <div ng-switch on="myData.switch">
        <div ng-switch-when="1">Shown when switch is 1</div>
        <div ng-switch-when="2">Shown when switch is 2</div>
        <div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
    </div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.switch = 3;
    });
</script>

로그인 후 복사

HTML 템플릿은 ng-controller 속성이 있는 div 요소에 포함되어 있습니다. HTML 템플릿 내부에는 span 요소가 있고 내부에는 보간 명령이 있습니다. 이 지시문은 AngularJSmyData.text에 지정된 위치에 데이터 값을 삽입하도록 지시합니다. 🎜🎜보간 지시문은 모델 객체의 함수에서 반환된 데이터를 보간할 수도 있습니다. 예는 다음과 같습니다. 🎜

<div ng-controller="MyController" >
    <div ng-if="myData.showIt">ng-if Show it</div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

🎜이 예에서 보간 명령 {{myData.textf()}}는 모델 개체 myData.textf()에 대한 함수를 호출합니다. $scope를 입력하고 함수에서 반환된 텍스트를 HTML 템플릿에 삽입하세요. 🎜🎜예제에서 볼 수 있듯이 textf() 함수는 $scope.myData 컨트롤러 함수 내부의 개체에 삽입됩니다. 🎜🎜🎜🎜🎜🎜🎜🎜ng-bind 지시문 🎜🎜🎜🎜 ng-bind 지시문은 보간 지시문을 대체합니다. AngularJS가 데이터를 삽입하려는 HTML 요소에 속성을 삽입하여 ng-bind하여 사용할 수 있습니다. 예는 다음과 같습니다. 🎜

<div ng-controller="MyController" >
    <div ng-include="&#39;angular-included-fragment.html&#39;"></div>
</div>

로그인 후 복사

🎜이렇게 하면 myData.text() 함수에서 반환된 데이터가 span 요소의 본문에 삽입됩니다. {{ }} 속성 내 표현식을 둘러싸는 ng-bind는 필요하지 않습니다. 🎜

🎜모델에서 HTML을 이스케이프하세요🎜🎜🎜모델에서 얻은 데이터에 HTML 요소가 포함된 경우 이러한 요소는 HTML 템플릿에 삽입되기 전에 이스케이프됩니다. 이스케이프 처리는 HTML이 HTML이 아닌 텍스트로 표시된다는 의미입니다. 🎜🎜이는 HTML 삽입 공격을 방지하기 위해 수행됩니다. 예를 들어, 채팅 애플리케이션에서 누군가 <script> JavaScript가 포함된 요소를 채팅 메시지에 삽입할 수 있습니다. 이 요소가 이스케이프되지 않으면 채팅 메시지를 보는 사람은 누구나 <script> 요소를 실행할 수 있습니다. HTML 이스케이프를 사용하면 <script> 요소가 텍스트로만 표시됩니다. 🎜🎜아래와 같이 ng-bind-html-unsafe 지시문을 사용하여 HTML 이스케이프를 비활성화할 수 있습니다. 🎜

<div ng-controller="MyController" >
    <div ng-include="myData.showIt &&
                        &#39;fragment-1.html&#39; ||
                        &#39;fragment-2.html&#39;"></div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

🎜HTML 이스케이프를 비활성화할 때는 매우 주의해야 합니다. 신뢰할 수 없는 HTML이 표시되지 않는지 확인하세요. 🎜🎜🎜🎜🎜

조건부 렌더링🎜🎜AngularJS는 모델의 데이터 상태에 따라 HTML을 표시하거나 숨길 수 있습니다. 이 목적을 위해 특별히 만들어진 AngularJS 지시문 세트를 사용할 수 있습니다. 다음 섹션에서 이러한 지침을 다루겠습니다. 🎜🎜🎜🎜🎜🎜🎜🎜ng-show + ng-hide 지시문 🎜🎜🎜🎜 ng-show 및 ng-hide 지시문은 기본적으로 표시하거나 숨기는 데 사용됩니다. 모델의 HTML 요소에 있는 데이터입니다. 이 두 명령은 동일한 작업을 수행하지만 서로 반대입니다. 다음은 두 가지 예입니다. 🎜

<ol>
   <li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
    });
</script>

로그인 후 복사

🎜이 예는 두 개의 span 요소를 만듭니다. 하나에는 ng-show 지시문이 있고 다른 하나에는 ng-hide 지시문이 있습니다. 두 지시문 모두 myData.showIt 부울 변수를 확인하여 span 요소를 표시할지 아니면 숨겨야 할지 결정합니다. ng-show 지시어는 모델 값이 true이면 요소를 표시하고, 모델 값이 false이면 요소를 숨깁니다. ng-hide 지시문은 반대 작업을 수행합니다. span은 모델 값이 true이면 요소를 숨기고 모델 값이 false이면 표시합니다. 🎜

注意控制器函数如何将设置myData.showIt为true。这意味着上面的示例将显示第一个 span 元素并隐藏第二个。

HTML 元素（span在本例中为元素）使用 CSS 属性隐藏display: none;。这意味着 HTML 元素仍然存在于 DOM 中。它们只是不可见。

ng-switch 指令

ng-switch如果您想根据模型中的数据从 DOM 中添加或删除 HTML 元素，则使用该指令。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-switch on="myData.switch">
        <div ng-switch-when="1">Shown when switch is 1</div>
        <div ng-switch-when="2">Shown when switch is 2</div>
        <div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
    </div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.switch = 3;
    });
</script>

로그인 후 복사

此示例包含一个div具有ng-switch属性和on属性的元素。该on属性指示要打开模型中的哪些数据。

div元素内部是三个嵌套div元素。前两个嵌套div元素包含一个ng-switch-when属性。该属性的值告诉on父属性中引用的模型数据div应该具有什么值，以便嵌套div可见。在此示例中，第一个嵌套div在myData.switch为 1时可见，第二个嵌套div在myData.switch为 2时可见。

该third嵌套div有一个ng-switch-default属性。如果没有其他ng-switch-when指令匹配，则显示div withng-switch-default属性。

在上面的示例中，控制器函数设置myData.switch为 3。这意味着将显示嵌套div的ng-switch-default属性。另外两个嵌套div元素将从 DOM 中完全删除。

ng-if 指令

该ng-if指令可以包括/从DOM删除HTML元素，就像ng-switch指令，但它有一个简单的语法。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-if="myData.showIt">ng-if Show it</div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

ng-if和ng-show+ 之间的主要区别ng-hide是 ng-if从 DOM 中完全删除 HTML 元素，而ng-show+ ng-hide只是将 CSS 属性display: none;应用于元素。

ng-include 指令

该ng-include指令可用于将来自其他文件的 HTML 片段包含到视图的 HTML 模板中。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-include="&#39;angular-included-fragment.html&#39;"></div>
</div>

로그인 후 복사

T此示例将文件包含angular-included-fragment.html到div具有ng-include属性的 HTML 模板内。注意文件名是如何引用的（单引号）。

您可以根据条件包含 HTML 片段。例如，您可以在两个文件之间进行选择，如下所示：

<div ng-controller="MyController" >
    <div ng-include="myData.showIt &&
                        &#39;fragment-1.html&#39; ||
                        &#39;fragment-2.html&#39;"></div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

로그인 후 복사

此示例将包括fragment-1.htmlifmyData.showIt为 true 和fragment-2.htmlifmyData.showIt为 false。

ng-repeat 指令

该ng-repeat指令用于迭代一组项目并从中生成 HTML。在初始生成之后，ng-repeat监视用于生成 HTML 的项目的更改。如果项目发生变化，该ng-repeat指令可能会相应地更新 HTML。这包括重新排序和删除 DOM 节点。

这是一个简单的ng-repeat例子：

<ol>
   <li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
    });
</script>

로그인 후 복사

此示例将为数组中的li每个项目创建一个元素myData.items。

您还可以迭代从函数调用返回的集合。下面是一个例子：

<ol>
   <li ng-repeat="theItem in myData.getItems()">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
        $scope.myData.getItems = function() { return this.items; };
    });
</script>

로그인 후 복사

您可以使用稍微不同的语法迭代 JavaScript 对象的属性：

<ol>
   <li ng-repeat="(name, value) in myData.myObject">{{name}} = {{value}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"};
    });
</script>

로그인 후 복사

注意指令的(name, value)部分ng-repeat。这会通知 AngularJS 迭代对象的属性。该name 参数将被绑定到的属性名称和value参数将被绑定到的属性值。该name和value参数可以输出到HTML模板，就像任何其他JavaScript变量或对象的属性，你可以从上面的HTML模板见。

特殊的 ng-repeat 变量

该ng-repeat指令定义了一组特殊变量，您可以在迭代集合时使用这些变量。这些变量是：

$index
$first
$中
$last

该$index变量包含被迭代元素的索引。

的$first，$middle并且$last包含根据当前的项目是否正在迭代集合中的第一，中间或最后一个元素的布尔值。如果一个项目既不是第一个也不是最后一个，它就是“中间”。您可以使用这些变量使用例如生成不同的HTML ng-show/ ng-hide，ng-switch， ng-if和ng-include指令如前所述。

重复多个元素

到目前为止，您只看到了如何使用ng-repeat. 如果您想重复多个 HTML 元素，您必须将这些元素嵌套在容器元素中，并让容器元素具有该ng-repeat 元素，如下所示：

<div ng-repeat="(name, value) in myData.myObject">
   <div>{{name}}</li>
   <div>{{value}}</li>
</div>

로그인 후 복사

但是，将要重复的元素包装在根元素中可能并不总是可行的。因此 AngularJS 有ng-repeat-start和ng-repeat-end指令，用于标记开始和结束重复的元素。下面是一个例子：

<ol>
    <li ng-repeat-start="(name, value) in myData.myObject">{{name}}</li>
    <li ng-repeat-end>{{value}}</li>
</ol>

로그인 후 복사

此示例将为中的li每个属性重复这两个元素 myData.myObject。

过滤

上面介绍的一些指令支持过滤。本节将解释过滤的工作原理。

该ng-repeat指令可以接受这样的过滤器：

<div ng-repeat="item in myData.items | filter: itemFilter"></div>

로그인 후 복사

注意| filter: itemFilter上面声明的部分。那部分是过滤器定义。该| filter:部分告诉 AngularJS 将过滤器应用于 myData.items数组。该itemFilter是过滤函数的名称。此函数必须存在于$scope对象上，并且必须返回 true 或 false。如果过滤器函数返回 true，则ng-repeat指令使用数组中的元素。如果过滤器函数返回 false，则忽略该元素。下面是一个例子：

<script>
  angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.items  = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];

      $scope.itemFilter = function(item) {
        if(item.text == "two") return false;
          return true;
        }
      }
    });
</script>

로그인 후 복사

格式化过滤器

AngularJS 带有一组内置格式过滤器，可以与插值指令和ng-bind. 以下是格式过滤器的列表：

过滤器	说明
`date`	根据给定的日期格式将变量格式化为日期
`currency`	将变量格式化为带有货币符号的数字
`number`	将变量格式化为数字
`lowercase`	将变量转换为小写
`uppercase`	将变量转换为大写
`json`	将变量转换为 JSON 字符串

这是一个日期过滤器示例：

<span>{{myData.theDate | date: &#39;dd-MM-yyyy&#39;}}</span>

로그인 후 복사

此示例显示了date可以根据| date: 部分后给出的日期格式模式格式化 JavaScript 日期对象的过滤器。它是myData.theDate 将被格式化为日期的属性。因此，它必须是一个 JavaScript 日期对象。

这是一个数字过滤器示例：

<span>{{myData.theNumber | number: 2}}</span>

로그인 후 복사

此示例将myData.theNumber变量格式化为带有 2 个小数位的数字。

下面是一个小写和大写过滤器示例：

<span>{{myData.mixedCaseText | lowercase}}</span>
<span>{{myData.mixedCaseText | uppercase}}</span>

로그인 후 복사

数组过滤器

AngularJS 还包含一组过滤或转换数组的数组过滤器。这些过滤器是：

数组过滤器：

过滤器	说明
`limitTo`	将数组限制为给定的大小，从数组中的某个索引开始。该`limitTo`过滤器也适用于字符串。
`filter`	通用过滤器。
`orderBy`	根据提供的条件对数组进行排序。

下面是一个limitTo例子：

<span>{{myData.theText | limitTo: 3}}</span>

로그인 후 복사

这将$scope myData.theText变量限制为 3 个字符的长度。如果将此过滤器应用于数组，则该数组将被限制为 3 个元素。

该filter过滤器是一种特殊的过滤器，可以做很多不同的事情。在最简单的形式中，它只是调用$scope对象上的函数。此函数必须返回trueor false。如果过滤器接受传递给它的值，则返回 True。如果过滤器不能接受该值，则返回 False。如果过滤器不能接受该值，则该值不包含在过滤产生的数组中。下面是一个例子：

<ol>
    <li ng-repeat="item in myData.items | filter:filterArray">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<script>
    angular.module("myapp", [])
        .controller("MyController", function($scope) {
            $scope.myData = {};
            $scope.myData.items    = 
                [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];

            $scope.filterArray = function(item) {
                if(item.text == "two") return false;
                return true;
            }
        } );
</script>

로그인 후 복사

此示例调用filterArray()过滤掉具有text值为的属性的项目的函数two。

下面是一个orderBy例子：

<ol>
    <li ng-repeat="item in myData.items | orderBy:sortField:reverse">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
    
<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.items    = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
                $scope.sortField = "text";
                $scope.reverse   = true;
            } );
</script>

로그인 후 복사

所述orderBy过滤器可以接受一个$scope变量作为参数。在此示例中，该变量名为sortField。此变量的值是已排序数据对象的属性名称，用于对数据对象进行排序。在此示例中，sortField 属性设置为text这意味着数据对象的text属性用于对数据对象进行排序。

该orderBy过滤器还可以采取的第二$scope变量作为参数。在此示例中，该变量名为reverse。该变量的值决定了数据对象是按自然顺序排序，还是按自然顺序排序。在这种情况下，reverse变量设置为true，这意味着数据对象将按相反顺序排序。

链接过滤器

可以通过简单地在过滤器部分中一个接一个地放置更多过滤器来链接过滤器。链接过滤器时，一个过滤器的输出用作链中下一个过滤器的输入。下面是一个例子：

<span>{{myData.theText | limitTo: 5 | uppercase}}</span>

로그인 후 복사

此示例首先myData.theText使用limitTo过滤器将字符串限制为 5 个字符，然后使用过滤器将 5 个字符转换为大写uppercase 。

将过滤器输出分配给变量

可以将过滤器的输出分配给一个临时变量，然后您可以稍后在视图中引用该变量。下面是一个例子：

<ol>
    <li ng-repeat="item in filteredItems = ( myData.items | filter:filterArray) ">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<div>{{filteredItems.length}}</div>

로그인 후 복사

此示例将过滤的输出分配给filteredItems变量。该示例然后{{ }}在ol元素下的指令内引用此变量。

实现自定义过滤器

如果 AngularJS 过滤器不适合您的需要，您可以实现自己的过滤器。下面是一个例子：

<div>Filtered: {{myData.text | myFilter}}</div>
    
    
<script>
    var module = angular.module("myapp", []);

    module.filter(&#39;myFilter&#39;, function() {

        return function(stringValue) {
            return stringValue.substring(0,3);
        };
    });
</script>

로그인 후 복사

此示例向 AngularJS 注册了一个过滤器，它可以过滤字符串。过滤器返回字符串的前 3 个字符。过滤器以 name 注册myFilter。正如您在过滤器开头看到的那样，您在引用过滤器时必须使用该名称。

如果您的过滤器需要更多的输入参数，请在过滤器函数中添加更多参数，并在过滤器名称和:引用它时添加参数。下面是一个例子：

<div>Filtered: {{myData.text | myFilter :2:5}}</div>

<script>
    var module = angular.module("myapp", []);

    module.filter(&#39;myFilter&#39;, function() {

        return function(stringValue, startIndex, endIndex) {
            return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
        };
    });
</script>

로그인 후 복사

注意过滤器引用 ( | myfilter:2:5) 现在在过滤器名称后面有两个值，每个值用冒号分隔。这两个值作为参数传递给过滤器。还要注意 filter 函数现在如何接受两个名为startIndex和的额外参数endIndex。这两个参数用于确定字符串的哪一部分作为子字符串从过滤器返回

更多编程相关知识，请访问：编程入门！！

위 내용은 Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

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

7675

Cakephp 튜토리얼

1393

C# 튜토리얼

1207

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

Win11 활성화 키 영구

Related knowledge

Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? -테라리아에서 아이템을 수집하는 방법은 무엇인가요? Mar 19, 2024 am 08:13 AM

Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? 1. 테라리아에서 아이템을 주는 명령은 무엇인가요? 테라리아 게임에서 아이템에 명령을 내리는 것은 매우 실용적인 기능입니다. 이 명령을 통해 플레이어는 몬스터와 싸우거나 특정 위치로 순간이동할 필요 없이 필요한 아이템을 직접 얻을 수 있습니다. 이를 통해 시간을 크게 절약하고, 게임 효율성을 향상시키며, 플레이어가 세계를 탐험하고 건설하는 데 더 집중할 수 있습니다. 전반적으로 이 기능은 게임 경험을 더 부드럽고 즐겁게 만듭니다. 2. Terraria를 사용하여 아이템 명령을 내리는 방법 1. 게임을 열고 게임 인터페이스로 들어갑니다. 2. 키보드의 "Enter" 키를 눌러 채팅창을 엽니다. 3. 채팅창에 "/give[플레이어 이름][아이템 ID][아이템 수량]" 명령 형식을 입력하세요.

iOS 17의 대기 모드는 충전 중인 iPhone을 홈 허브로 바꿔줍니다. Jun 06, 2023 am 08:20 AM

iOS 17에서 Apple은 iPhone을 가로 방향으로 충전하도록 설계된 새로운 디스플레이 환경인 대기 모드를 선보입니다. 이 위치에서 iPhone은 일련의 전체 화면 위젯을 표시하여 유용한 홈 허브로 전환할 수 있습니다. 대기 모드는 iOS 17을 실행하는 iPhone을 충전기에 수평으로 올려놓으면 자동으로 활성화됩니다. 시간, 날씨, 달력, 음악 컨트롤, 사진 등을 볼 수 있습니다. 사용 가능한 대기 옵션을 왼쪽이나 오른쪽으로 스와이프한 다음 길게 누르거나 위/아래로 스와이프하여 사용자 정의할 수 있습니다. 예를 들어 아날로그 보기, 디지털 보기, 버블폰트, 일광 보기 중에서 선택할 수 있는데, 시간이 지남에 따라 배경색이 변합니다. 몇 가지 옵션이 있습니다.

Vue에서 편집 가능한 테이블을 구현하는 방법 Nov 08, 2023 pm 12:51 PM

테이블은 많은 웹 애플리케이션에서 필수적인 구성 요소입니다. 테이블에는 일반적으로 많은 양의 데이터가 있으므로 사용자 경험을 개선하려면 테이블에 몇 가지 특정 기능이 필요합니다. 중요한 기능 중 하나는 편집 가능성입니다. 이 기사에서는 Vue.js를 사용하여 편집 가능한 테이블을 구현하는 방법을 살펴보고 구체적인 코드 예제를 제공합니다. 1단계: 데이터 준비 먼저 테이블에 사용할 데이터를 준비해야 합니다. JSON 객체를 사용하여 테이블의 데이터를 저장하고 Vue 인스턴스의 data 속성에 저장할 수 있습니다. 이 경우

VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환 Jun 15, 2023 pm 11:45 PM

이 글은 초보자가 Vue.js3를 빠르게 시작하고 간단한 탭 전환 효과를 얻을 수 있도록 돕는 것을 목표로 합니다. Vue.js는 재사용 가능한 구성 요소를 구축하고 애플리케이션 상태를 쉽게 관리하며 사용자 인터페이스 상호 작용을 처리하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue.js3은 최신 버전의 프레임워크로, 이전 버전과 비교하여 큰 변화가 있었지만 기본 원칙은 변경되지 않았습니다. 이 기사에서는 독자가 Vue.js에 익숙해질 수 있도록 Vue.js 지침을 사용하여 탭 전환 효과를 구현합니다.

SpringBoot와 SpringMVC의 차이점과 비교 이해 Dec 29, 2023 am 09:20 AM

SpringBoot와 SpringMVC를 비교하고 차이점을 이해하십시오. Java 개발의 지속적인 개발로 인해 Spring 프레임워크는 많은 개발자와 기업에서 첫 번째 선택이 되었습니다. Spring 생태계에서 SpringBoot와 SpringMVC는 매우 중요한 두 가지 구성 요소입니다. 둘 다 Spring 프레임워크를 기반으로 하지만 기능과 사용법에 약간의 차이가 있습니다. 이 기사에서는 SpringBoot와 Spring을 비교하는 데 중점을 둘 것입니다.

PHP에서 CodeIgniter4 프레임워크를 사용하는 방법은 무엇입니까? May 31, 2023 pm 02:51 PM

PHP는 매우 널리 사용되는 프로그래밍 언어이며 CodeIgniter4는 일반적으로 사용되는 PHP 프레임워크입니다. 웹 애플리케이션을 개발할 때 프레임워크를 사용하면 개발 프로세스 속도를 높이고 코드 품질을 향상시키며 유지 관리 비용을 줄일 수 있습니다. 이 기사에서는 CodeIgniter4 프레임워크를 사용하는 방법을 소개합니다. CodeIgniter4 프레임워크 설치 CodeIgniter4 프레임워크는 공식 홈페이지(https://codeigniter.com/)에서 다운로드할 수 있습니다. 아래에

Laravel 개발: Laravel View를 사용하여 뷰를 생성하는 방법은 무엇입니까? Jun 14, 2023 pm 03:28 PM

Laravel은 현재 가장 인기 있는 PHP 프레임워크 중 하나이며 강력한 뷰 생성 기능이 인상적입니다. 보기는 웹 애플리케이션에서 사용자에게 표시되는 페이지 또는 시각적 요소로, HTML, CSS, JavaScript와 같은 코드가 포함되어 있습니다. LaravelView를 사용하면 개발자는 구조화된 템플릿 언어를 사용하여 웹 페이지를 구축하고 컨트롤러 및 라우팅을 통해 해당 뷰를 생성할 수 있습니다. 이번 글에서는 LaravelView를 사용하여 뷰를 생성하는 방법을 살펴보겠습니다. 1. 무엇

Word의 보기는 무엇입니까? Mar 19, 2024 pm 06:10 PM

많은 학생들이 단어 조판 기술을 배우고 싶어하는 것 같은데, 편집자는 조판 기술을 배우기 전에 단어 보기를 명확하게 이해해야 한다고 비밀리에 말합니다. Word2007에서는 사용자가 선택할 수 있는 5가지 보기가 제공됩니다. 보기, 읽기 레이아웃 보기, 웹 레이아웃 보기, 개요 보기, 일반 보기 오늘은 이 5가지 단어 보기에 대해 알아보겠습니다. 1. 페이지 보기 페이지 보기는 주로 머리글, 바닥글, 그래픽 개체, 열 설정, 페이지 여백 및 기타 요소를 포함하는 Word2007 문서의 인쇄 결과 모양을 표시할 수 있습니다. 인쇄 결과에 가장 가까운 페이지 보기입니다. 2. 읽기 레이아웃 보기 읽기 레이아웃 보기에는 Word2007 문서와 Office가 책의 열 스타일로 표시됩니다.

See all articles

Angularjs의 뷰와 지시문에 대해 자세히 알아보세요.

AngularJS 뷰 및 지시문 소개

AngularJS Commands

从模型中转义 HTML

条件渲染

过滤

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제