Question

使用AngularJS将数据绑定到表单时遇到问题。我使用ajax从数据库获取book的信息和所有类别，并在控制器中分配给变量$ scope。某些字段已绑定到表单，但字段category_id无法设置为已选中。

这是我的控制器

gridApp.controller('editCtrl',function($scope,$parse,$http,$routeParams,$location,BookService){
$http({
    url: base_url + 'angular/get-books',
    method: 'GET',
    params: {id:$routeParams.id}
}).then(function(response){
    $scope.book = response.data;
});

$http.get(base_url + 'angular/get-categories').then(function(response){
    $scope.categories = response.data;
});

$scope.save = function(){
    BookService.save($scope.book).success(function(response){
        if(response.success){
            $location.path('/index');
        }else{
            angular.forEach(response.message,function(msg,field){
                field = field.charAt(0).toUpperCase() + field.substr(1).toLowerCase();
                var  errorField = 'error'+field;
                $parse(errorField).assign($scope,msg);
            })
        }
    });
}});

这是我的配置代码

gridApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$locationProvider.html5Mode({enabled: true, requireBase: false});
$routeProvider
    .when('/index',{ templateUrl: base_url + 'assets/partials/index.html', controller: 'datagridCtrl' })
    .when('/create',{ templateUrl: base_url + 'assets/partials/form.html', controller: 'createCtrl' })
    .when('/edit/:id',{ templateUrl: base_url + 'assets/partials/form.html', controller: 'editCtrl' })
    .otherwise({ redirectTo: '/index' })}]);

这是我的观看代码

<div class="row">
<div class="col-sm-12">
    <form class="form-horizontal">
        <div class="form-group" ng-class="{ 'has-error' : errorName }">
            <label class="control-label col-sm-3">Name</label>
            <div class="col-sm-6">
                <input type="text" ng-model="book.name" placeholder="Name" class="form-control"/>
                <p class="help-block" ng-show="errorName">{{ errorName }}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">Category</label>
            <div class="col-sm-6">
                <select class="form-control" ng-model="book.category_id" ng-options="item.id as item.name for item in categories track by item.id">
                    <option value="">Select Category</option>
                </select>
            </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : errorPrice }">
            <label class="control-label col-sm-3">Price</label>
            <div class="col-sm-6">
                <input type="text" ng-model="book.price" placeholder="Price" class="form-control"/>
                <p class="help-block" ng-show="errorPrice">{{ errorPrice }}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">Special</label>
            <div class="col-sm-6">
                <label class="radio-inline">
                    <input type="radio" name="special" ng-model="book.special" value="1"/> Yes 
                </label>
                <label class="radio-inline">
                    <input type="radio" name="special" ng-model="book.special" value="0"/> No
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">Description</label>
            <div class="col-sm-6">
                <textarea class="form-control" ng-model="book.description" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6 col-sm-offset-3">
                <button ng-click="save()" class="btn btn-success">Save</button>
            </div>
        </div>
    </form>
</div>

这是将数据绑定到表单后的结果 binding data to form

请帮助解决这个问题

Answer 1

我建议您使用ng-repeat指令作为选择控件，而不是使用ng-options指令。

您可以找到ng-repeat和ng-options之间的区别。

ng-repeat为每次迭代创建一个新的范围，因此不会像ng-options那样执行。

对于小型列表，无关紧要，但较大的列表应使用ng-options。除此之外，它在指定迭代器方面提供了很大的灵活性，并且比ng-repeat提供了性能优势。

绑定数据以使用AngularJS进行选择

1 个答案: