2015-01-15 2 views
0

각 모양의 앱에 양식 당 몇 가지 변수를 제출하고 싶습니다.

<div class="page-header" align="center"> 
    <h1>The Mean Blog</h1> 
    </div> 

    <div ng-repeat="article in articles"> 
    <h3>{{ article.title }}</h3> 
    <blockquote>{{ article.content }}</blockquote> 

    <footer> 
    <span class="glyphicon glyphicon-heart" 
    ng-click="giveLike(article)" 
    style="margin-right:5px;"> 
    </span> 

    Likes: {{ article.likes }}, 

    <a href="#/articles/{{ article._id }}" style="color:black"> 
    <span class="glyphicon glyphicon-comment" 
    style="margin-left:5px;"> 
    </span> 
    </a> 

    <span class="glyphicon glyphicon-trash" 
    ng-click="deleteArticle(article)" 
    style="margin-right:5px;margin-left:5px;"> 
    </span> 

    <span class="glyphicon glyphicon-pencil" 
    ng-click="edit_article = !edit_article"> 
    </span> 
    </footer> 

    <div ng-show="edit_article"> 
    <form style="margin-top:30px;"> 
    <h3>Edit this article!</h3> 


    <div class="form-group"> 
    <input class="form-control" 
     type="text" 
     ng-model="title" 
     ng-init="title=article.title"> 
    </input> 
    </div> 

    <div class="form-group"> 
    <textarea class="form-control" 
     spellcheck="false" 
     ng-model="content" 
     ng-init="content=article.content"> 
    </textarea> 
    </div> 

    <button ng-click="updateArticle()" type="submit" class="btn btn-primary">Save</button> 
    </form> 
    </div> 
    </div> 

그리고 각 부분 : 나는 HTML 설정 다음있어

angular.module('meanBlog', ['ui.router']) 

.config([ 
'$stateProvider', // Ein Router, der auf States basiert 
'$urlRouterProvider', // Die einem State zugehörigen URLs werden zur Verfügung gestellt 
function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    // Homepage mit den Artikeln 
    .state('home', { 
     url: '/home', 
     templateUrl: '/home.html', 
     controller: 'PrimaryController', 
     // Promise wird ausgeführt bevor der Controller initialisiert wird 
     resolve: { 
     articlePromise: ['articlesFactory', function(articlesFactory) { 
      return articlesFactory.retrieveArticles(); 
     }] 
     } 
    }) 
    // Genauere Ansicht der Artikel 
    .state('articles', { 
     url: '/articles/{id}', // Routen Parameter der dem Controller zur Verfügung steht 
     templateUrl: '/articles.html', 
     controller: 'ArticlesController', 
     // Das Artikel Objekt wird samt Kommentaren geladen 
     // und kann im ArticlesController injiziert werden 
     resolve: { 
     article: ['$stateParams', 'articlesFactory', function($stateParams, articlesFactory) { 
      return articlesFactory.retrieveArticle($stateParams.id); 
     }] 
     } 
    }); 
    // Falls eine undefinierte URL aufgerufen wird, wird das state 'home' benutzt 
    $urlRouterProvider.otherwise('home'); 
}]) 

... 

.factory('articlesFactory', ['$http', function($http) { 
    // 'articles' beinhaltet alle Artikel. 'art' ist eine jedem Modul verfügbare Variable 
    var art = { 
    articles: [] 
    }; 

    art.updateArticle = function(article) { 
    return $http.put('/articles/' + article._id + '/update', article); 
    }; 
} 

... 

.controller('PrimaryController', [ 
'$scope', 
'articlesFactory', 
function($scope, articlesFactory) { 

    $scope.articles = articlesFactory.articles; 

    $scope.updateArticle = function() { 
    console.log($scope.title); 
    articlesFactory.updateArticle({ 
     _id: $scope.article._id, 
     title: $scope.title, 
     content: $scope.content, 
    }); 
    }; 

을 불행하게도 내가 콘솔 때 각도가 무엇을 사용하지 왜 나는 정의되지 않은

+0

. 충분하지 않아? –

+0

응용 프로그램에서 ng-repeat 스코프가 컨트롤러 스코프를 덮어 씁니다. 기본 데이터 유형으로 ng-repeat 내부에 ng-modal을 만드는 경우 컨트롤러 범위에서 해당 생각을 사용할 수 없습니다. 해결책은 다음 중 하나입니다. formdata를 사용하거나 $ parent.title을 사용하십시오. 희망이 있습니다. – squiroid

+0

HTML에서'ng-controller'는 어디에 있습니까? –

답변

2

를 얻을 $ scope.title 로그 에 대한?

컨트롤러 :

$scope.articles = articlesFactory.articles; 

// other stuff 

보기 :

<div ng-repeat="article in articles"> 
    <form> 
     <input class="form-control" 
      type="text" 
      ng-model="article.title" /> 

     <textarea class="form-control" 
      spellcheck="false" 
      ng-model="article.content"> 
     </textarea> 

     <button ng-click="updateArticle(article)" type="submit" class="btn btn-primary">Save</button> 
    </form> 
</div> 

updateArticle :

나는 상태 제공자를 가지고
$scope.updateArticle = function(article) { 
    articlesFactory.updateArticle({ 
     _id: article._id, 
     title: article.title, 
     content: article.content, 
    }); 
    // or just articlesFactory.updateArticle(article); 
    }; 
+0

정말 좋은 솔루션이지만 초기화 된 제목과 내용은 항상 동일합니다 –

+0

아이디어가 있습니까? –

+1

수정 된 답변 확인 – devqon

관련 문제