angularjs无法更新输入字段

debugcn 发表于 Dev

Thebiglebowski11

我知道已经有几个问题，但是大多数建议使用我已经在做的点语法。我有一个链接到范围变量的输入字段：

<!doctype html>
<html>
<head>
    <title>Test - Home</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="/file-upload/angular-file-upload-shim.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="/file-upload/angular-file-upload.min.js"></script> 
    <script type="text/javascript" src="/edit_property.js"></script>
    <script src="/xml2json.js"></script>
    <script>var myProp = "<%= property_id %>";</script>

    <style>
        body        { padding-top:80px; word-wrap:break-word; }
    </style>
</head>
<body ng-app="editProp">
<%- include partials/navbar.ejs %>

<div class="container">
    <div ng-controller="editPropController">
        <div class="row">
            <h3 class="form-fonts" ><span class="glyphicon glyphicon-pencil"></span>  Edit Property - {{ my_property.name }} </h3>
            <button class="btn btn-warning btn-sm" ng-click="changeShowDetails()" ng-show="!showDetails">Edit Details</button>
            <button class="btn btn-warning btn-sm" ng-click="changeShowImages()" ng-show="showDetails">Edit Images</button>

                <div class="input-text-form" style="padding-top:10px;" ng-show="showDetails">
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="name">Name</label>
                        <input class="form-control" id="name" type="text" ng-model="my_property.name"/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="price">Price ($)</label>
                        <input class="form-control" id="price" type="text" ng-model="my_property.price"/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="city">City</label>
                        <input class="form-control" id="city" type="text" ng-model="my_property.city" placeholder="e.g. Chicago" required/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="state">State</label>
                        <input class="form-control" id="state" type="text" ng-model="my_property.state" required placeholder="e.g. IL" ng-minlength="2" ng-maxlength="2"/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts control-label">Apt, Suite, Bldg. (optional)</label>
                        <input name="suite" class="form-control" type="text" placeholder="e.g. Apt #7" ng-model="my_property.suite" />
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="zip">Zip</label>
                        <input class="form-control" id="zip" type="text" ng-model="my_property.zip"/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="bedrooms">Bedrooms</label>
                        <input class="form-control" id="bedrooms" type="text" ng-model="my_property.num_beds"/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="bedrooms">Bathrooms</label>
                        <input class="form-control" id="bedrooms" type="text" ng-model="my_property.num_beds"/>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="form-fonts" for="is_rented">Is Rented?</label>
                        <input class="form-control" id="is_rented" type="text" ng-model="my_property.is_rented"/>
                    </div>

                    <div class="col-md-12 form-group">
                        <label class="form-fonts" for="description">Description</label>
                        <textarea class="form-control" id="description" name="description" ng-model="my_property.description" srows="3"></textarea>
                    </div>
                </div>
        </div>
    </div>
</div>

</body>
</html>

输入字段填充了正确的值，但是我无法对其进行编辑。更奇怪的是，可以编辑文本区域...这是控制器：

    'use strict'

var editProp = angular.module('editProp', ['angularFileUpload'])
    .run(function ($rootScope, $location, $http) {

        $http.get('/api/config').success(function(config) {
            $rootScope.config = config;
        });
    });

function editPropController($scope, $http, $window, $upload, $rootScope, $route) {
    $scope.prop_id = myProp;
    $scope.my_property;
    $scope.showDetails = true;
    $scope.newImageUploads = [];
    $scope.selected_images = [];

    $http.get('/api/propertyById/' + $scope.prop_id)
        .success(function(properties) {
            $scope.my_property = properties[0];
        })
        .error(function(err) {
            alert('We got an error: ' + err);
        });

    $scope.saveEdits = function() {
        $http.put('/api/updateProperty', $scope.my_property)
            .success(function(property) {
                var myImages = {};
                myImages['imageArr'] = $scope.newImageUploads;   
                $http.put('/api/updatePropertyImages/' + $scope.prop_id, myImages)
                    .success(function(data){
                        console.log('success');
                        $window.location.href = '/profile'; 
                    })
                    .error(function(data) {
                        alert('There was an uploading the images. Please contact [email protected] for assistance');
                    })
            })
            .error(function(err) {
                alert('we got an error: ' + JSON.stringify(err));
            })
    };

    $scope.select_image = function(image) {
        var image_index = $scope.selected_images.indexOf(image)
        if(image_index != -1) {
            $scope.selected_images.splice(image_index, 1);
        } else {
            $scope.selected_images.push(image);
        }
    }

    $scope.delete_selected_images = function() {
        console.log('selected images: ' + JSON.stringify($scope.selected_images));
    }

    $scope.changeShowDetails = function() {
        $scope.showDetails = true;
    };

    $scope.changeShowImages = function() {
        $scope.showDetails = false;
    };

    $scope.cancel = function() {
        $window.location.href = '/profile'; 
    };  
}

这是$ scope.my_property对象：

{"__v":0,"_id":"53655b63d81f2e3eaf000001","city":"test","description":"this is a test property","is_rented":false,"landlord_id":"53504b0230d09f1c4a000001","latitude":"41.8902901","longitude":"-87.6384679","name":"test","num_baths":1,"num_beds":1,"price":1800,"street":"test","zip":"60654","imageURLs":["https://test.s3.amazonaws.com/shimmy-assets%2F3320%24hottub.jpg"]}

最后，通过api调用来获取属性：

exports.propertyById = function(req, res) {
    console.log('getting property by id: ' + req.params.property_id);
    Property.find({'_id': req.params.property_id }, function(err, property) {
        if(err) res.send(err);
        res.send(property);
    });
};

再次，表单确实填充了值，只是它们无法编辑。我添加了所有代码，因为先前的答案无法找到解决方案。

威特

我可以在我的电脑上复制它 ~~，但不能在缩孔~~ 机 ~~上复制~~ 。解决方法是将引导程序至少升级到版本3.0.3。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

乍一看，我没有在该版本的错误修复和更改列表中具体提及此错误。但是3.0.2是我可以重现该错误的最新版本。进行升级以3.0.3消除该问题。

更新

可以使用嵌入式视图在plunker中重现该错误：http ://embed.plnkr.co/7cmvSLFMlek40R6igKba/preview

这是此修复程序的演示，已升级到引导程序版本3.0.3：http : //embed.plnkr.co/IBfNRzR63wzE2EFwRRm0/preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。