javascript - 编辑 View 中的帖子未填充... Angular

Question

我正在尝试填充 Angular 1.x 中的编辑 View 。我的 Controller 正在记录“themenu”和“$scope.addmenu”的值，但数据未显示在文本字段中。

angular.module('sample.menu', [
'auth0'
]).controller('MenuCtrl', function HomeController($scope, $http, auth, $location, store) {

$scope.menus = {};
$scope.addmenu = {};

var res1 = $http.get('http://grubr2.webfacelab.com:8888/index.php/api/menu');
res1.success(function (data, status, headers, config) {
  console.log(data);
  $scope.menus = data;
});
res1.error(function (data, status, headers, config) {
  alert("failure message: " + JSON.stringify({ data: data }));
});



$scope.addMenu = function () {
  console.log('Adding Menu');
  console.log($scope.menu);
  var res = $http.post('http://grubr2.webfacelab.com:8888/index.php/api/menu', $scope.menu);
  res.success(function (data, status, headers, config) {
    $scope.message = data;
  });
  res.error(function (data, status, headers, config) {
    alert("failure message: " + JSON.stringify({ data: data }));
  });

}

$scope.editThisMenu = function (themenu) {
  console.log("Edit this menu:");
  console.log(themenu);
  console.log("End menu data");

  $scope.addmenu = themenu;
  console.log($scope.addmenu);


}

$scope.updateMenu=function(){
  alert('Update menu!!');
}


});

在我看来 Menus.html

<ion-view title="Menus">
<ion-content padding="'true'" class="has-header">
    <form class="list">
        <div class="list card">
            <div class="item item-divider">Menu Item</div>
            <div class="item item-body">
                <ion-list>
                    <ion-item menu-close="" class="item-thumbnail-left">
                        <img>
                        <h2>Menu Item</h2>
                        <p>**Delicious</p>
                    </ion-item>
                </ion-list>
                <button class="button button-stable button-block ">Upload Picture</button>
            </div>
        </div>
        <ion-list>
            <label class="item item-input">
                <span class="input-label">Name</span>
                <input ng-model="menu.name" type="text" placeholder="">
            </label>
            <label class="item item-input">
                <span class="input-label">Description</span><textarea ng-model="menu.description" placeholder=""> </textarea>
            </label>
            <label class="item item-input">
                <span class="input-label">Price</span>
                <input ng-model="menu.price" type="number" placeholder="">
            </label>
        </ion-list>
        <div class="spacer" style="height: 40px;"></div>
        <button class="button button-stable button-block " ng-click="addMenu()">Add Menu</button>
    </form>
    <hr>
    <div ng-repeat="menu in menus">
        <li>{{menu.id}}: <a href="#/menu/{{menu.id}}" ng-click="editThisMenu(menu)">{{menu.name}}</a></li>
    </div>
</ion-content>

还有 Menuedit.html，它应该显示要编辑的内容

<ion-view title="Menus">
<ion-content padding="'true'" class="has-header">
    <form class="list">
        <div class="list card">
            <div class="item item-divider">Edit Menu Item</div>
            <div class="item item-body">
                <ion-list>
                    <ion-item menu-close="" class="item-thumbnail-left">
                        <img>
                        <h2>Menu Item</h2>
                        <p>**Delicious</p>
                    </ion-item>
                </ion-list>
                <button class="button button-stable button-block ">Edit Picture</button>
            </div>
        </div>
        <ion-list>
            <label class="item item-input">
                <span class="input-label">Name</span>
                <input ng-model="addmenu.name" type="text" placeholder="">
            </label>
            <label class="item item-input">
                <span class="input-label">Description</span><textarea ng-model="addmenu.description" placeholder=""> </textarea>
            </label>
            <label class="item item-input">
                <span class="input-label">Price</span>
                <input ng-model="addmenu.price" type="number" placeholder="">
            </label>
        </ion-list>
        <div class="spacer" style="height: 40px;"></div>
        <button class="button button-stable button-block " ng-click="updateMenu()">Update Menu</button>
    </form>
    <hr>

</ion-content>

Answer 1

我不能 100% 确定是什么导致了您的问题，因为我认为您没有提供足够的信息来确定。但我认为这与你的客户端路由有关。在此:<a href="#/menu/{{menu.id}}" ng-click="editThisMenu(menu)">{{menu.name}}</a></li>您有一个似乎是您的应用程序的一部分的链接。 ng-click 不允许更改路由，因此您的模板很可能仍然是 Menus.html而不是Menuedit.html .

不过，我想谈谈您是如何构建这个模块的。您的模板中存在大量重复，可以通过范围上的简单标志来减少重复。使用诸如$scope.isNew之类的标志将允许您使用ng-if指令来关闭和打开某些 HTML 元素，具体取决于您是否正在编辑或创建新菜单。我还添加了一些功能，所以请耐心等待。

我会像这样设置你的 Controller :

$scope.isNew = true; // flag to keep track of form state
$scope.menus = []; // initialize an empty array for the menus
$scope.menu = {}; // initialize an empty object for the form

var res1 = $http.get('mock.json');
res1
  .success(function(data) {
    $scope.menus = data;
  })
  .error(function (data) {
    console.log("failure message: " + JSON.stringify(data));
  });

$scope.clear = function() {
  $scope.isNew = true;
  $scope.menu = {};
}

$scope.submit = function(menu) {
  if ($scope.isNew) {
    $scope.menus.push(menu);
  } else {
    $scope.menus[$scope.currentIndex] = menu;
  }
  $scope.clear();
}

$scope.remove = function() {
  $scope.menus.splice($scope.currentIndex, 1);
  $scope.clear();
}

$scope.edit = function(menu, index) {
  $scope.currentIndex = index;
  $scope.isNew = false;

  // this has to be copied so it's not two-way bound to the template
  $scope.menu = angular.copy(menu);
}

如您所见，我添加了 isNew标志和 clear作用范围。我还添加了 currentIndex到启用编辑时的范围。 currentIndex在删除项目(我添加的功能的一部分)时使用，因为删除按钮位于要删除的项目的范围之外。 clear函数将重置表单并切换 isNew旗帜。我已经更改了addMenu原始代码中的函数为 submit以便该术语更好地代表其提交编辑或新菜单的能力。

现在是模板:

<section class="has-header" ng-controller="MenuCtrl">
  <button ng-if="!isNew" class="button button-stable button-block" ng-click="clear()">New Menu</button>
  <form class="list">
    <div class="list card">
        <div class="item item-divider">Menu Item</div>
        <div class="item item-body">
            <div>
                <div menu-close="" class="item-thumbnail-left">
                    <img>
                    <h2>Menu Item</h2>
                    <p>**Delicious</p>
                </div>
            </div>
            <button class="button button-stable button-block ">Upload Picture</button>
        </div>
    </div>
    <div>
        <label class="item item-input">
            <span class="input-label">Name</span>
            <input ng-model="menu.name" type="text" placeholder="">
        </label>
        <br>
        <label class="item item-input">
            <span class="input-label">Description</span><textarea ng-model="menu.description" placeholder=""> </textarea>
        </label>
        <br>
        <label class="item item-input">
            <span class="input-label">Price</span>
            <input ng-model="menu.price" type="number" placeholder="">
        </label>
    </div>
    <div class="spacer" style="height: 40px;"></div>
    <button class="button button-stable button-block " ng-click="submit(menu)">
      <span ng-if="isNew">Add Menu</span>
      <span ng-if="!isNew">Update Menu</span>
    </button>
    <button ng-if="!isNew" class="button button-stable button-block" ng-click="remove()">Delete Menu</button>
  </form>
  <hr>
  <div ng-repeat="menu in menus track by $index">
    <li>{{menu.id}}: <a ng-click="edit(menu, $index)">{{menu.name}}</a></li>
  </div>
</section>

我在顶部添加了一个按钮来创建新菜单，该菜单仅在您处于编辑模式时才会显示。它所做的只是清除表格。我添加了对 isNew 的检查对于提交按钮，根据 isNew 更改它是否显示“更新”或“添加” 。我添加了一个“删除”按钮，仅在编辑模式下显示。希望我已经清楚地解释了我的想法，因为我觉得这是解决您的问题的更好方法。如需任何澄清，请随时提问。我还创建了一个 Plunk 来演示所有这些。 http://plnkr.co/edit/gvP2iUahPjhzTmByPQw6?p=preview