Javascript 编辑视图中的帖子未填充。。。有棱角的

我正在尝试在angular 1.x中填充编辑视图。我的控制器正在记录“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!!');
}


});

以及在my views 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>

菜单项
菜单项
**美味的

上传图片
名称
描述
价格
添加菜单

{{menu.id}}：

以及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>

编辑菜单项
菜单项
**美味的

编辑图片
名称
描述
价格
更新菜单

---

我不能100%确定是什么原因导致了您的问题，因为我认为您没有提供足够的信息来确定。但我认为这与客户端路由有关。在这里：

您有一个指向应用程序的链接。ng单击将不允许更改路由，因此您的模板很可能仍然是

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

<代码>当前索引用于删除项目（我添加的功能的一部分），因为删除按钮位于被删除项目的范围之外。

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>

新菜单
菜单项
菜单项
**美味的

上传图片
名称


描述


价格
添加菜单
更新菜单
删除菜单

{{menu.id}：
我不能100%确定是什么原因导致了您的问题，因为我认为您没有提供足够的信息来确定。但我认为这与客户端路由有关。在这里：

您有一个指向应用程序的链接。ng单击将不允许更改路由，因此您的模板很可能仍然是

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

<代码>当前索引用于删除项目（我添加的功能的一部分），因为删除按钮位于被删除项目的范围之外。

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>

新菜单
菜单项
菜单项
**美味的

上传图片
名称


描述


价格
添加菜单
更新菜单
删除菜单

{{menu.id}}：