Question

我有一个索引页面，显示我的数据库中所有“行为”的表格。基本上，我正在尝试做的是：当我想要更新其中一个动作时，我不想加载新视图，而是想要在可以提交的行为行的下方呈现部分。

现在，我猜我是否使用带有静态变量名的ng-click：

 ng-click="updateActShow=true" ng-show="updateActShow"

它将为所有行为呈现部分更新。因此，我想使用包含要更新的行为的id的变量名称：

ng-click"updateActShow[act.id]=true" ng-show="updateActShow[act.id]".

我一直试图用数组做这个。但我无法按照我的意愿去工作。

这是我的代码：

作用/模板/ index.html中

<div class="actions_body">
  <div class="container">
    <h2>Listing Actions</h2>

    <div class="body">
      <table class>
        <thead>
          <tr class="row">
            <th class="col-md-2 active">
              <label>Name</label>
            </th>
            <th class="col-md-5">Description</th>
            <th class="col-md-2">Inspires</th>
            <th colspan="2" class="col-md-2">Modify</th>
          </tr>
        </thead>
        <tbody>
          <tr class="row" ng-repeat="act in acts">
            <td class="col-md-2"><a href="" ng-click="linkToShowAct(act)">{{act.name}}</a></td>
            <td class="col-md-5">{{act.description}}</td>
            <td class="col-md-2">{{act.inspires}}</td>
            <td><button ng-click="updateActShow(act)">Edit</button></td>
            <td><button ng-click="deleteAct(act)">Delete</button>
          </tr>

          <div ng-show="updateActShowArr[act]" id="updateAct">
            <div ng-include="'acts/templates/_form.html'"></div>
          </div>
        </tbody>
      </table>

      <br>

      <button ng-click="newActShow=true">New Action</button>
      <button ng-click="newActShow=false">Hide</button>

      <div ng-show="newActShow" id="newAct">
        <div ng-include="'acts/templates/_form.html'"></div>
      </div>
    </div>
  </div>
</div>

作用/模板/ _form.html

<div class="row" ng-controller="ActsController">
  <form class="form-inline" ng-submit="addAct()">
    <div class="col-md-2 form-group">
      <label for="newActname">Name</label>
      <input type="text" ng-model="newAct.name" id="newActname" placeholder="Name" class="form-control">
    </div>
    <div class="col-md-4 form-group">
      <label for="newActdescription">Description</label>
      <input type="textarea" ng-model="newAct.description" id="newActdescription" placeholder="Description" class="form-control">
    </div>
    <div class="col-md-2 form-group">
      <label for="newActinspires">Inspires</label>
      <input type="number" ng-model="newAct.inspires" id="newActinspires" placeholder="Inspires" class="form-control">
    </div>
    <div class="col-md-2 form-group">
      <input type="submit" value="+" class="btn btn-success">
    </div>
  </form>
</div>

作用/控制器/ ActsController.js

controllers = angular.module('controllers');

controllers.controller('ActsController', [
    '$scope', 
    '$routeParams', 
    '$location', 
    '$resource', 
    function($scope,$routeParams,$location,$resource) {

        var Act = $resource('/acts/:actId', {
            actId: "@id",
            format: 'json'
        },  {
            'create': {
                method: 'POST'
            }
        });

        $scope.acts = Act.query();

        $scope.addAct = function() {
            act = Act.save($scope.newAct, function() {
                $scope.acts.push(act);
                $scope.newAct = '';
            });
        }

        $scope.deleteAct = function(act) {
            act.$delete();
            $scope.acts.splice($scope.acts.indexOf(act), 1);
        }

        var updateActShowArr = new Array();
        $scope.updateActShow = function(act) {
            updateActShowArr[act] = true;
            $scope.updateActShowArr = updateActShowArr;
        }

        $scope.linkToShowAct = function(act) {
            return $location.path('/acts/' + act.id);
        } 
}]);

Answer 1

在我看来，updateActShow是一个函数，而不是一个变量。这将使它成为

updateActShow(act.id)

Angular：使用动态变量进行ng-click

1 个答案: