Question

我有一个通过JSON / REST填充的选择。它会按预期填充下拉列表，并为我提供将值发布到我的数据库时所需的值（ID），但是一旦我选择了一个选项，它就会清除选择中的所有标签，这样我就无法选择如果我误点击或看到我选择的标签，则会有所不同。

这是我的HTML：

<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>

这是我的控制器：

// 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();
}
}]);

Answer 1

这是因为您的ng-model和选择选项@ opt as opt.label for opt in categoryoptions指向同一属性。因此，当您从select中选择一个值时，它会使用所选值（对象）设置ngmodel categoryoptions，并且选项列表categoryoptions也是相同的，因此您会看到它被清除，因为{{1 }不再是选择选项列表。为categoryoptions使用不同的属性名称，反之亦然。

实施例： -

ng-model

或者将值设置为数组本身的属性<select data-ng-model="selectedCategory" data-ng-options="opt as opt.label for opt in categoryoptions"> </select>或强制点规则（如果可能需要）在控制器categoryoptions.selected中定义对象并将ng-model设置为{{ 1}}

选择值后，AngularJS选择清除

1 个答案: