使用 AngularJS 檢查物件中是否存在鍵
概述
可以使用 AngularJS 檢查物件中是否存在某個鍵。物件中的鍵是唯一的,不能重複。由於物件是以鍵值對形式儲存不同資料型別的集合,其中包含字串、數字型別的資料到單個引用變數中。要檢查鍵是否存在,我們將使用“in”運算子,它將檢查物件並返回真或假。
語法
此問題中使用的語法為:
if (key in objectName ) {
action
} else {
action
}
objectName - 這是包含鍵值對的物件的名稱。
key - 這是在物件中搜索的鍵。
in - 它是“in”運算子,它迭代給定的物件名稱以檢查給定的鍵。
解釋
在這種方法中,我們使用了“in”運算子來檢查其是否存在。由於 AngularJs 透過在 HTML 中使用“{{ expression }}”在 HTML 中使用表示式來簡化我們的工作,因此在指令碼標籤中,我們建立了 Angular 模組並建立了一個物件,就像我們通常建立的那樣。然後,我們將輸入欄位中的輸入儲存在 ng-model 的變數“val”中。然後透過“in”運算子檢查“val”;如果在物件中找到鍵,則返回 if 操作;否則,執行另一個操作。
<script>
var app = angular.module("myapp", []);
app.controller("controller", function ($scope) {
$scope.obj = { 'obj1': 1, 'obj2': 2, 'obj3': 3 };
$scope.checkKey = function () {
var val = $scope.objKey;
if (val in $scope.obj) {
$scope.output = "key "+val+" exist"
} else {
$scope.output = "key do not exist";
}
}
})
</script>
演算法
步驟 1 - 建立一個 angular.module 容器,傳遞 HTML 根元素的名稱並將其儲存在變數中。
步驟 2 - 在控制器中傳遞 $scope。建立一個名為 obj 的物件,並在控制器中傳遞另一個作用域繫結以建立一個名為 checkKey() 的函式。
步驟 3 - 將要搜尋的鍵儲存在變數中。
步驟 4 - 使用“in”運算子迭代物件以查詢鍵。
步驟 5 - 如果在迭代物件時,“in”運算子找到與我們正在搜尋的鍵相等的鍵,則返回 true,否則返回 false。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<title>How to check the existence of key in an object using AngularJS</title>
<style>
body{
display: flex;
min-height: 90vh;
place-content: center;
align-items: center;
background-color: #0a0a0a;
color: white;
}
.main{
box-shadow: 0 0 8px white;
padding: 0.2rem;
border-radius: 5px;
margin: 0 auto;
}
</style>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="controller" class="main">
<p>object: {{obj}}</p>
<input type="text" ng-model="objKey" placeholder="Enter key here">
<button ng-click="checkKey()" style="margin-top: 5px;">Check Now</button>
<p>{{output}}</p>
</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("controller", function ($scope) {
$scope.obj = { 'obj1': 1, 'obj2': 2, 'obj3': 3 };
$scope.checkKey = function () {
var val = $scope.objKey;
if (val in $scope.obj) {
$scope.output = "key "+val+" exist"
} else {
$scope.output = "Not Exist";
}
}
})
</script>
</body>
</html>
輸出顯示我們檢查了“obj1”,因此將此值傳遞給 checkKey() 函式並在給定物件中檢查鍵。在透過“in”運算子檢查後,它返回了 true,並且如果條件已執行,則輸出“鍵 obj1 存在”,
它表明在輸入欄位中輸入的鍵在物件中未找到,因此它返回了 false,並且 else 條件已執行,輸出“鍵不存在”。
結論
“in”運算子的返回型別是布林值,當在物件中找到特定鍵時,它返回 true,否則返回 false。“in”運算子既可以在 JavaScript 中使用,也可以在 AngularJs 中使用。在前面的方法中,物件是從內部 javascript 動態呈現的,並作為表示式插入表示式內部,但為了使用這些表示式,父標籤必須使用 ng-app="" 指令。
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP