点击ng后可以触发一个ng类

Can one trigger ng-class after ng-click?

本文关键字：ng 一个 点击      更新时间：2023-09-26

我有以下元素：

<a href="" ng-click="project.hasPhotos? removeFromProject(project, $index, currentPhoto) : addToProject($index, currentPhoto)" ng-class="{'selected-project': (belongsPhotoToProject(project, $index, currentPhoto) || project.hasPhotos)}">{{ project.label }}</a>

ng-class的想法是：如果照片属于项目，函数belongsPhotoToProject返回true，因此设置了selected-project类。现在，点击，在函数removeFromProject(project, $index, currentPhoto)被触发后，belongsPhotoToProject不再计算为true，所以我希望它删除该类，然而，这并没有发生。

所以我的问题是：在初始页面加载之后，ng-click在哪些页面上被触发？如果ng-click只在页面加载时触发，我可以在ng-click上手动再次触发它吗？

这应该像你描述的那样工作

http://plnkr.co/edit/V4R0EUwKK5TeH5wn7Y5N?p=preview

你的浏览器中有错误吗？

javascript:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.project = {
    hasPhotos: true,
    label: "My Test Project"
  };
  $scope.removeFromProject = function(project, $index, currentPhoto) {
    $scope.project.hasPhotos = false;
  };
  $scope.addToProject = function($index, currentPhoto) {
    $scope.project.hasPhotos = true;
  };
  $scope.belongsPhotoToProject = function(project, $index, currentPhoto) {
    return $scope.project.hasPhotos;
  };
});

html:

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <a href="" ng-click="project.hasPhotos? removeFromProject(project, $index, currentPhoto) : addToProject($index, currentPhoto)" ng-class="{'selected-project': (belongsPhotoToProject(project, $index, currentPhoto) || project.hasPhotos)}">{{ project.label }}</a>
  </body>
</html>

css：

.selected-project {
  background-color: #ccf;
}
相关文章：