Question

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

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

输入字段会填充正确的值，但我无法编辑它。更奇怪的是textarea可以编辑......这是控制器：

    '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 admin@shimmylandlord.com 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);
    });
};

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

Answer 1

我能够在我的电脑~~上重现这一点，但不能在plunker上重现~~。解决方法是将bootstrap升级到至少版本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>

乍一看，我没有在bug fixes and changes列表中看到有关此错误的具体提及。但3.0.2是我可以重现错误的最后一个版本。升级到3.0.3消除了问题。

<强>更新

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

以下是修复程序的演示，升级到bootstrap版本3.0.3： http://embed.plnkr.co/IBfNRzR63wzE2EFwRRm0/preview

Answer 2

您的代码似乎没有问题，我创建了一个小提琴并成功填充了输入字段并对其进行了更新。

示例：

JS：

app.controller('MyCtrl', function($scope, $http) { $scope.property = {}; $http.get('data.json') .success(function(data) { $scope.property = data[0]; }) });

HTML：

<body ng-controller="MyCtrl"> <label class="form-fonts" for="name">Name</label> <input class="form-control" id="name" type="text" ng-model="property.name"/> {{property}} </body>

实例：http://plnkr.co/edit/gka74k4dn9hs0AHJ4TZi?p=preview

Answer 3

ng-model支持双向数据绑定，这意味着如果您可以看到已填充的值并且可以在文本框中对其进行编辑，则会在后台同时更改，在您的情况下$scope.property.name

Answer 4

代码看起来也很好。你应该怎么做：

从html文件中删除所有脚本和链接元标记（也包括js和css）。现在是否启用了字段？
逐个添加script-meta-tags并检查字段是否仍然启用：angular.min.js，jquery.min.js
添加edit_property.js并删除对angular-file-upload的依赖关系（将['angularFileUpload']替换为[]）
仍然填充并已启用？添加其他脚本。启用？添加CSS。启用？将依赖关系恢复为['angularFileUpload']。

P.S。你检查控制台输出吗？ P.P.S.你的角度版很老......

Answer 5

你有一个CSS问题。不是角度的。

您的输入字段包含在col-md-6类的div中。 Bootstrap网格类（col-xx-12类除外）是浮动的。这意味着它们之后的框（非浮动）元素将在它们上面呈现，从而使鼠标单击无法访问它们。

这就是为什么你的上一个表单控件（textarea）是可编辑的;它遍布所有其他领域。

Twitter Bootstrap网格列（具有col-nn-[1-11]类的元素）应该包含在row类中，以便＆＃34;包含＆＃34;漂浮。在HTML中，您没有将输入对包装在row类中。

要修复，只需将每个输入对包装在<div class="row">元素中。

WORKING PLUNKER

解决方案摘录：

<div class="row">
  <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>

<div class="row">
  <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>

... and so on

angularjs无法更新输入字段

5 个答案: