在表单上加载 json 文件答案

【问题标题】：angular loading a json file on a form在表单上加载 json 文件
【发布时间】：2015-02-12 18:33:33
【问题描述】：

我最近开始使用 angular 和 node.js。我正在尝试根据下拉列表中选择的选项在某些 html 表单上填充 json 文件的内容。我设法做到了，但问题是一旦我手动更改表单的内容，如果我想加载它之前的值（从下拉列表中选择选项），表单的值不会更改保留我手动放置的那个。

有人知道有没有办法解决这个问题？

提前致谢。

桑德拉。

这是我的代码：

- json file: content that I want to populate on the forms
[
    {
        "host": "server1",
        "user": "dan",
        "pwd": "123456",
        "remotedir": "OUT",
        "localdir": "65_cargo/dmshared",
        "pattern":"FNVAC",
        "archive": "0",
        "monitor": "2"
    },
    {
        "host": "ftp.xmap.com",
        "user": "pront",
        "pwd": "x14ck",
        "remotedir": "OUT",
        "localdir": "107_sss/dmshared",
        "pattern":"csv",
        "archive": "0",
        "monitor": "2"
    }
]

-html file: website

<!doctype html>
<html ng-app="gtApp">
  <head>
    <!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script-->
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="ftpsites.js" type="text/javascript"></script>
  </head>
  <body>
    <div ng-controller="ftpSitesCtrl">
    <h1>TTS GetTrack Control Panel</h1>
    <h2>Total FTP Sites {{ getTotalSites() }}</h2> 
    <p>Select Site</p>
    <select ng-model="selectedItem" ng-options="item.host for item in ftpsites">
    </select>
    <div>
      <p>Edit Site Details</p>
      <form>
      <table>
        <tr>
          <td>Host</td>
          <td><input type="text" value="{{selectedItem.host}}"/></td>
        </tr>
        <tr>
            <td>User Name</td>
            <td><input type="text" value="{{selectedItem.user}}"/></td>
        </tr>
          <tr>
            <td>Password</td>
            <td><input type="text" value="{{selectedItem.pwd}}"/></td>
        </tr>
          <tr>
            <td>Remote Directory</td>
            <td><input type="text" value="{{selectedItem.remotedir}}"/></td>
        </tr>
         <tr>
            <td>Local Directory</td>
            <td><input type="text" value="{{selectedItem.localdir}}"/></td>
        </tr>
         <tr>
            <td>File Pattern</td>
            <td><input type="text" value="{{selectedItem.pattern}}"/></td>
        </tr>
        <tr>
            <td>Archive</td>
            <td><select><option selected>No</option><option>Yes</option></selected></td>
        </tr>
        <tr>
            <td>Monitor (Days)</td>
            <td><select><option="{{selectedItem.monitor}}"></option></selected></td>
        </tr>
      </table>
    </form>
    </div>
  </div>
  </body>
</html>

js file: logic

var gtApp  =  angular.module('gtApp', []);

gtApp.controller('ftpSitesCtrl', function($scope, $http){
    $http.get('ftpsites.json').success(function (data){
        $scope.ftpsites = data;
    });

    $scope.getTotalSites = function(){
        return $scope.ftpsites.length;    
    } 

    $scope.populateData = function(){
        $scope.host=ftpsites.host;
        //return $scope;

    }
});

【问题讨论】：

请添加ftpSitesCtrl的代码

标签： json angularjs node.js

【解决方案1】：

在每个输入上将“值”更改为“ng-model”（没有大括号）

value - 一次绑定，将值打印到占位符

ng-model - 两种方式绑定到模型对象

示例

<td><input type="text" ng-model="formSelectedItem.pattern"/></td>

编辑：

尝试在您的控制器上添加此代码：

$scope.formSelectedItem = {};
$scope.$watch('selectedItem', function(newVal) {
    $scope.formSelectedItem = newVal;
});

注意 ng-model 属性的变化

【讨论】：

谢谢 Ben，但如果我这样做了，那么当我在表单上插入新值时，下拉列表的选项就会改变。有没有办法保留我的选项列表并同时编辑表单值？感谢您的帮助！
它不会影响列表，因为您使用 selectedItem 变量，如果我理解它不是列表的一部分 @user2746984
你说它不会影响列表，但它会。我刚刚进行了您告诉我的更改，当我输入新主机时，下拉列表已更改
@user2746984 注意变化
感谢 Ben，但它也是如此。因此，当我输入表单的新值时，下拉选项也会自动更改。