Question

请注意，此问题与名为here或here的类似问题略有不同。我想要做的是“在HTML标签内部进行评估”，而不是在指令内（或在控制器中）。这种描述可能是错误的或难以理解，但我找不到更好的方法;所以我制作了下面的自包含代码来说明。您可以复制并过去并保存为“xyz.html”，看看我的意思。

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
    <script>
      'use strict';
      let app = angular.module('myApp', []);
      app.controller('myCtrl', ['$scope', function ($scope) {
        let d = DATA_TYPE;
        let e = EDIT_TYPE;
        $scope.tbContents = {
          fields: [
            {name: 'name', dataType: d.text, editType: e.text, refs:[]},
            {name: 'catalog', dataType: d.text, editType: e.dropdown, refs: ['catalog1', 'catalog2', 'catalog3']},
            {name: 'status', dataType: d.int, editType: e.dropdown, refs: [1, 2, 3, 4]}],
          rows: [
            {name: 'name1', catalog: 'catalog1', status: 1},
            {name: 'name2', catalog: 'catalog1', status: 1},
            {name: 'name3', catalog: 'catalog2', status: 2}
          ]
        };
        $scope.refNameKey = '';
        $scope.setRefNameKey = function(key) {
          $scope.refNameKey = key;
        };
        $scope.getRefByNameKey = function(key) {
          let res = [];
          for(let i = 0; i < $scope.tbContents.fields.length; i++) {
            if($scope.tbContents.fields[i].name == key) {
              return $scope.tbContents.fields[i].refs;
            }
          }
        };
      }]);

      app.filter('filterDropdown', function () {
        return function (fields) {
          let output = [];
          for (let i = 0; i < fields.length; i++) {
            if (fields[i].editType == EDIT_TYPE.dropdown) {
              output.push(fields[i]);
            }
          }
          return output;
        };
      });

      const DATA_TYPE = {
        int: 1,
        text: 2,
        //...
      };

      const EDIT_TYPE = {
        dropdown: 1,
        test: 2,
        //...
      };
    </script>
  </head>

  <body>
    <div ng-controller="myCtrl">
      <div>
        <!--<p ng-repeat="field in tbContents.fields | filterDropdown"><a href="#" ng-click="refNameKey=field.name">{{field.name}}</a></p>-->
        <p ng-repeat="field in tbContents.fields | filterDropdown"><a href="#" ng-click="setRefNameKey(field.name)">{{field.name}}</a></p>
      </div>
      <hr />
      <div ng-show = "refNameKey">
        <p ng-repeat = "ref in getRefByNameKey(refNameKey)">{{ref}}</p>
      </div>
    </div>
  </body>
</html>

我想要的是我在HTML代码中评论的行refNameKey=field.name而不是setRefNameKey(field.name)。我不知道为什么refNameKey=field.name不起作用，但我不喜欢为这个简单的任务创建setRefNameKey函数。

Answer 1

ng-repeat为每次迭代创建子范围。因此，您的refNameKey变量在每个子作用域中创建，而不是在父作用域中引用refNameKey。您可以通过修改它来解决此问题：

<p ng-repeat="field in tbContents.fields | filterDropdown"><a href="#" ng-click="$parent.refNameKey=field.name">{{field.name}}</a></p>

Plunker：http://plnkr.co/edit/mcDvGqd6SFCfmqyfUNRc?p=preview

Angularjs：评估HTML标记内的表达式

1 个答案: