编辑视图中的帖子不填充...角度

时间：2015-12-03 00:04:23

标签： javascript angularjs ionic-framework

我正在尝试在角度1.x中填充编辑视图。我的控制器正在记录＆＃34; themenu＆＃34;和＆＃34; $ scope.addmenu＆＃34;但数据没有显示在文本字段中.. 

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>

1 个答案:

答案 0 :(得分：0)

我不能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元素，具体取决于您是否正在编辑或创建新菜单。我也添加了一些功能，所以请耐心等待。

我会像这样设置你的控制器：

$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的检查，更改是否显示＆＃34;更新＆＃34;或＆＃34;添加＆＃34;基于isNew。我添加了一个＆＃34;删除＆＃34;按钮，仅在编辑模式下显示。希望我能清楚地解释我的想法，因为我觉得这对你的问题来说是一个更好的方法。如有任何澄清，请随时提问。我还创建了一个Plunk来演示所有这些。 http://plnkr.co/edit/gvP2iUahPjhzTmByPQw6?p=preview

相关问题
最新问题