Javascript angularjs无法更新输入字段_Javascript_Angularjs

Javascript angularjs无法更新输入字段

javascript angularjs

Javascript angularjs无法更新输入字段,javascript,angularjs,Javascript,Angularjs,我知道在这方面已经有几个问题了，但大多数人建议使用我已经在做的点语法。我有一个链接到范围变量的输入字段： <!doctype html> <html> <head> <title>Test - Home</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

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

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

以下是$scope.my_属性对象：

{"__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);
    });
};

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

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

例如：

js:

html:

实例：

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

例如：

js:

html:

实例：

ng模型支持双向数据绑定，这意味着如果您可以看到填充的值并在textbox中编辑它，它将同时在后台更改，在您的示例中为$scope.property.name

ng模型支持双向数据绑定，这意味着如果您可以看到填充的值并在textbox中编辑它，它同时在后台发生变化，在您的例子中，$scope.property.name

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

从html文件中删除所有脚本和链接元标记以及js和css。现在是否启用字段？逐个添加脚本元标记，并检查字段是否仍处于启用状态：angular.min.js、jquery.min.js 添加edit_property.js并删除对角度文件上载的依赖项，将['angularFileUpload']替换为[] 仍然填充并启用？添加另一个脚本。启用？添加css。启用？将依赖项还原到['angularFileUpload']。另外，您是否检查控制台输出？

P.P.S.您的角度版本非常旧…

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

P.P.S.你的角度版本很旧…

我可以在我的电脑上复制，但不能在plunker上复制。修复方法是升级到至少3.0.3版

乍一看，我在发布的列表中没有看到对这个bug的具体提及。但是3.0.2是我能够重现错误的最后一个版本。升级到3.0.3消除了这个问题

更新

可以使用嵌入式视图在plunker中重现该缺陷：

下面是升级到bootstrap版本3.0.3的修复程序的演示：

我可以在我的电脑上复制，但不能在plunker上复制。修复方法是升级到至少3.0.3版

乍一看，我在发布的列表中没有看到对这个bug的具体提及。但是3.0.2是我能够重现错误的最后一个版本。升级到3.0.3消除了这个问题

更新

可以使用嵌入式视图在plunker中重现该缺陷：

下面是升级到bootstrap版本3.0.3的修复程序的演示：您遇到了CSS问题。没有棱角

您的输入字段用col-md-6类包装在div中。除col-xx-12类之外的引导网格类是浮动的。这意味着它们后面的长方体非浮动元素将在它们上面渲染，从而使鼠标单击无法访问它们

这就是为什么上一个表单控件文本区域是可编辑的；它正在溢出所有其他领域

具有col nn-[1-11]类的Twitter引导网格列元素应该被包装在row类中，以便包含浮点值。在HTML中，您并没有将输入对包装在row类中

要修复此问题，只需将每个输入对包装到元素中

解决方案摘录：

名称价格$ 城市状态 ... 等等你有一个CSS问题。没有棱角

这就是为什么上一个表单控件文本区域是可编辑的；它正在溢出所有其他领域

具有col nn-[1-11]类的Twitter引导网格列元素应该被包装在row类中，以便包含浮点值。在HTML中，您并没有将输入对包装在row类中

要修复此问题，只需将每个输入对包装到元素中

解决方案摘录：

名称价格$ 城市状态 ... 等等属性[0]是对象吗

属性是从api调用返回的响应的主体。它的名称应该更合适。问题是：$scope.property.name是否在$scope.property=properties[0]之后存在；。在那里放一些日志。你能分享更多你的代码吗，因为它看起来还可以。是$scope.property.name确实存在，并且它正在页面加载时填充文本字段。属性[0]是具有名称属性的对象吗？属性是从api调用返回的响应的主体。它的名称应该更合适。问题是：$scope.property.name是否在$scope.property=properties[0]之后存在；。在那里放一些日志。你能分享更多你的代码吗，因为它看起来还可以。是的$scope.property.name确实存在，并且它正在填充页面加载上的文本字段。有趣的是，为什么您认为在较新版本的引导中不需要这样做？从3.0.3开始，列知道如何在一行中排列自己。有趣的是，为什么您认为在较新版本的引导中不需要这样做？从3.0.3开始，列知道如何在一行中排列自己。

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);
    });
};

app.controller('MyCtrl', function($scope, $http) {
 $scope.property = {};

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

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

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