2015-01-25 2 views
1

JSON/REST를 통해 채워지는 select가 있습니다. 예상대로 드롭 다운을 채우고 내 DB에 값을 게시 할 때 필요한 값 (ID)을 제공하지만 일단 옵션을 선택하면 선택 항목의 모든 레이블을 지우므로 다른 레이블을 선택할 수 없습니다 내가 잘못 클릭하거나 내가 선택한 것을 볼 수 있습니다.AngularJS 선택 후 값 지우기

여기 내 HTML입니다 :

// Add new article 
pfcControllers.controller('pfcArticlePostCtrl', ['$scope', 'pfcArticles', 'pfcArticleCategories', function ($scope, pfcArticles, pfcArticleCategories) { 

var articleentry = new pfcArticles; 

$scope.categoryoptions = []; 

var articleCategoryNames = pfcArticleCategories.query(function() { 

    // Foreach category entry, push values into categoryoptions array 
    angular.forEach(articleCategoryNames, function (categoryvalue, categorykey) { 

     $scope.categoryoptions.push({ 
      label: categoryvalue.categoryname, 
      value: categoryvalue.categoryid, 
     }); 
    }) 
}); 


$scope.createTask = function() { 

    articleentry.articletitle = $scope.articletitle; 
    articleentry.articlecategoryid = $scope.categoryoptions.value; 
    articleentry.articlesummary = $scope.articlesummary; 
    articleentry.articlelink = $scope.articletitle.replace(/\s/g, "-").toLowerCase(); 

    articleentry.$save(); 
} 
}]); 

답변

3

opt as opt.label for opt in categoryoptions @ 당신의 ng-model 선택 옵션은 동일한 속성을 가리키는 때문이다

<div ng-controller="pfcArticlePostCtrl"> 
<form ng-submit="createTask()"> 
    <p> 
     <select data-ng-model="categoryoptions" 
       data-ng-options="opt as opt.label for opt in categoryoptions"></select> the value is {{categoryoptions.value}} 
    </p> 
    <p> 
     <input type="text" ng-model="articletitle" 
       placeholder="add new task here"> 
    </p> 
    <p> 
     <textarea ng-model="articlesummary" 
       placeholder="add summary"></textarea> 
    </p> 
    <input type="submit" value="create"> 
</form> 

가 여기 내 컨트롤러입니다. 따라서 선택에서 값을 선택하면 ngmodel categoryoptions을 선택한 값 (객체)으로 설정하고 옵션 목록 categoryoptions도 동일하므로 categoryoptions이 더 이상 선택 옵션 목록이 아니므로 해당 값이 지워집니다. ng-model에 다른 속성 이름을 사용하거나 그 반대의 경우도 마찬가지입니다.

예 : -

<select data-ng-model="selectedCategory" 
      data-ng-options="opt as opt.label for opt in categoryoptions"> 
</select> 

또는 배열 자체에 속성으로 값을 설정, categoryoptions.selected 또는 도트 규칙 (당신이 필요로 할 수있는 경우) 컨트롤러 $scope.category = {}; 및 설정 NG 모델에서 개체를 정의를 시행 할 예 : $scope.category.selected

+0

감사합니다. 그게 완벽하게 이해하고 작동하고 있습니다 – Kode

+0

@ 코데, 오신 것을 환영합니다. :) – PSL