溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Angular中如何使用$watch監(jiān)聽object屬性值

發(fā)布時(shí)間:2021-07-10 14:07:51 來源:億速云 閱讀:203 作者:小新 欄目:web開發(fā)

這篇文章主要介紹Angular中如何使用$watch監(jiān)聽object屬性值,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

Angular中的$watch可以監(jiān)聽屬性值的變化,然后并做出相應(yīng)處理。

常見用法:

$scope.$watch("person", function(n, o){
  //todo something...
})

但是對(duì)于一個(gè)對(duì)象中的某個(gè)屬性值變化時(shí),$watch似乎不管用了。

示例代碼:

<body>
  <div ng-controller="mainCtrl">
    <input id="myText" type="text" ng-model="person.name"/>
    <h3>{{person}}</h3>
    <h3>Status: {{status}}</h3>
  </div>
  <script>
  angular.module('myApp', [])
    .controller('mainCtrl', function ($scope) {
      $scope.person = {
        name:"allen",
        age:21
      }

      $scope.$watch("person", function(n, o){
        //取消第一次加載時(shí)的監(jiān)聽響應(yīng)
        if(n == o){
          return;
        }
        $scope.status = "changed"
      })
  })
</script>
</body>

我們?yōu)檩斎肟蚪壎藀erson對(duì)象的name屬性,然而當(dāng)我們改變輸入框的值時(shí)候,{{person}}確實(shí)改變了,然而并沒有出現(xiàn)我們想要的change字符。

效果:

Angular中如何使用$watch監(jiān)聽object屬性值

 我們需要為$watch方法額外添加一個(gè)true參數(shù),使之達(dá)到我們想要的效果:

$scope.$watch("person", function(n, o){
  if(n == o){
    return;
  }
  $scope.status = "changed";
},true)

$watch方法完整的使用方式是這樣的:

$watch(watchExpression, [listener], [objectEquality]);

第一個(gè)是監(jiān)聽的參數(shù)名稱,剩下兩個(gè)可選參數(shù)分別為處理函數(shù)和是相等比較的方式,對(duì)于后者文檔如是說:Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法進(jìn)行比較。

如此效果變?yōu)椋?/strong>

Angular中如何使用$watch監(jiān)聽object屬性值

以上是“Angular中如何使用$watch監(jiān)聽object屬性值”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI