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

回答

相关问题