Angularjs列表不提醒表單提交使用MEAN

一些什麼新的MEAN堆棧。目前，我正在通過codechool重新編寫一個小應用程序，使其成爲完整的MEAN堆棧。創建的應用程序都可以在這裏 Code School app Angularjs列表不提醒表單提交使用MEAN

看到在使用MEAN堆棧遞交表格後，我必須刷新頁面，看看這個城市添加到列表中重寫應用程序。我需要解決什麼問題，因此我不需要刷新要添加到列表中的新項目的頁面？如果我錯過下面這裏的任何相關的代碼是我的git的樞紐環節 git hub link

這裏是我的代碼：

angular.module('Cityapp').controller('CityIndexController', function(City, $scope){ 
$scope.cities = City.query(); 
window.sc = $scope; 

}); 

angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){ 
$scope.city = new City(); 
$scope.saveCity = function(city){ 
$http({ 
    method: 'POST', 
    url: '/city', 
    data: city}) 
.success(function(data, status, headers, config){ 

console.log($scope.city); 
console.log(data); 
console.log($scope.city); 
}). 
error(function(data,status,headers,config){ 

jQuery('.alert').show(); 
console.log('nope'); 
}); 
}; 

}); 


    <form ng-controller="CityCreateController"> 
<legend> New City</legend>  
    <input for="City-group" name="City" id="City" type="text" ng-model="city.city" placeholder="City Name"> 
    <input for="City-group" name="desc" id="desc" type="text" ng-model="city.desc" placeholder="Description"> 
<input type="submit" class="btn btn-default" ng-click="saveCity(city)"/> 
</form> 



<ul ng-controller="CityIndexController" class="city-list"> 
    <li ng-repeat="city in cities"> 
    <a href="#"> 
     {{city.city}}</a></li> 
</ul>

來源

2015-07-18 jminterwebs

'成功'回調中'data'看起來是否正確？ –

「對象{city：」Test City「，desc：」Test「，id：3}」這就是console.log返回的成功。 Id通過後端添加。 – jminterwebs

請向我們展示您的模板。 – Chev

它應該看起來就像這樣

;(function() { 
 
    function Cities($http) { 
 
    function City() { 
 
     
 
    } 
 
    
 
    City.prototype.save = function() { 
 
     return $http.post('/api/city', this); 
 
    }; 
 
    
 
    City.cities = []; 
 
    
 
    City.add = function(city) { 
 
     city.save().then(function() { 
 
     City.cities.push(city); 
 
     }); 
 
    }; 
 
    
 
    City.getAll = function() { 
 
     $http.get('/api/cities').then(function(response) { 
 
     City.cities = response.data.map(function(data) { 
 
      return new City(data); 
 
     }); 
 
     
 
     return cities; 
 
     }); 
 
    }; 
 
    
 
    return City; 
 
    } 
 
    
 
    function CityCreateController(Cities) { 
 
    var mv = this; 
 
    
 
    mv.city = new Cities(); 
 
    
 
    mv.saveCity = function() { 
 
     Cities.add(mv.city); 
 
    }; 
 
    } 
 
    
 
    function CityIndexController($scope, Cities) { 
 
    var mv = this; 
 
    
 
    $scope.$watchCollection(function() { 
 
     return Cities.cities; 
 
    }, function(cities) { 
 
     mv.cities = cities || []; 
 
    }); 
 
    
 
    Cities.getAll(); 
 
    } 
 
    
 
    angular 
 
    .module('app', []) 
 
    .factory('Cities', ['$http', Cities]) 
 
    .controller('CityCreateController', ['Cities', CityCreateController]) 
 
    .controller('CityIndexController', ['$scope', 'Cities', CityIndexController]); 
 
})();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body ng-app="app"> 
 
    <form ng-controller="CityCreateController as mv"> 
 
    <legend> New City</legend>  
 
    <input for="City-group" name="City" id="City" type="text" ng-model="mv.city.city" placeholder="City Name"> 
 
    <input for="City-group" name="desc" id="desc" type="text" ng-model="mv.city.desc" placeholder="Description"> 
 
    <input type="submit" class="btn btn-default" ng-click="mv.saveCity()"/> 
 
    </form> 
 
    
 
    <ul ng-controller="CityIndexController as mv" class="city-list"> 
 
    <li ng-repeat="city in mv.cities"> 
 
    <a href="#"> 
 
     {{city.city}}</a></li> 
 
    </ul> 
 
    
 
</body> 
 
</html>

來源

2015-07-19 03:17:11

找到了一個簡單的修復。 – jminterwebs

找到了一個簡單的修復方法

angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){ 
$scope.cities = City.query(); 

$scope.city = new City(); 


$scope.saveCity = function(city){ 
$http({ 
    method: 'POST', 
    url: '/city', 
    data: city}) 
.success(function(data, status, headers, config){ 

$scope.cities.push({city: $scope.city.city, 
        desc: $scope.city.desc}); 



}). 
error(function(data,status,headers,config){ 

jQuery('.alert').show(); 
console.log('nope'); 
}); 
}; 

});

剛剛添加的

$scope.cities.push({city: $scope.city.city, 
        desc: $scope.city.desc});

到.success。像它應該那樣工作。現在到我的下一個問題。

來源

2015-08-13 03:27:26 jminterwebs

Angularjs列表不提醒表單提交使用MEAN

回答

相關問題