帖子在編輯視圖沒有填充...角狀

我想在角度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!!'); 
} 


});

而且在我的觀點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>

來源

2015-12-03 webface

我不是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的支票，根據isNew更改它是否顯示「更新」或「添加」。我添加了一個「刪除」按鈕，僅在編輯模式下顯示。希望我已經清楚地解釋了我的想法，因爲我覺得這是對你的問題更好的方法。隨意提出任何澄清問題。我也創建了一個普拉克來展示所有這一切。 http://plnkr.co/edit/gvP2iUahPjhzTmByPQw6?p=preview

來源

2015-12-03 07:02:50 kevrom

帖子在編輯視圖沒有填充...角狀

回答

相關問題