从 angular 三元运算符引用 gridOptions

Question

我有一个 ui-grid，它有一个 toggleFilter 按钮：

$scope.gridOptions = {
  ...  
  enableFiltering: false,
  ...
}

$scope.toggleFilter = function () {
  $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
  $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};

<div id="filter" ng-click="toggleFilter()">
  ({{$scope.gridOptions.enableFiltering ? "-" : "+"}}) {{$scope.gridOptions.enableFiltering ? "Dis" : "En"}}able Filtering
</div>

开关按预期工作，文本在加载时显示正确，但不会随着 enableFiltering 中的更改而更新。缺少什么才能正确绑定此属性？

Answer 1

从您的 HTML 中删除 $scope。

({{gridOptions.enableFiltering ? "-" : "+"}}) {{gridOptions.enableFiltering ? "Dis" : "En"}}able Filtering

在这里工作 plunker https://plnkr.co/edit/vT6Ae8aJXrqonhq8ueKQ?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.gridOptions = {
  
  enableFiltering: false,
  
}

$scope.toggleFilter = function () {
  $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
  //$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};
  
  
});

<!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.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div id="filter" ng-click="toggleFilter()">
    ({{gridOptions.enableFiltering ? "-" : "+"}}) {{gridOptions.enableFiltering ? "Dis" : "En"}}able Filtering
  </div>

</body>

</html>

Answer 2

这是我的方法的一个笨蛋：https://jsfiddle.net/frishi/psysv1ao/2/

我认为您的三元表达式从未被计算过，您不需要使用 $scope 在您的视图中访问它的属性。这是隐含的。

其次，这是我的观点，控制 DOM 渲染的三元组非常不可读。请考虑使用 ng-if 或 ng-show 来实现 DOM.

的条件渲染

从 angular 三元运算符引用 gridOptions

Referencing gridOptions from angular ternary operator

angularjs

angular-ui-grid

angularjs-1.5