Question

我最近开始使用angular和node.js.我试图在某些html表单上填充json文件的内容，具体取决于在下拉列表中选择的选项。我设法做到了，但问题是我手动更改表单的内容，如果我想加载之前的值（从下拉列表中选择选项），表单的值不会＃39 ; t保持我手动放置的那个。

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

提前致谢。

桑德拉。

这是我的代码：

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

    }
});

Answer 1

在每个输入上改变＆＃34;值＆＃34;到＆＃34; ng-model＆＃34; （没有大括号）

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

ng-model - 双向绑定到模型对象

样品

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

编辑：

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

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

注意ng-model属性的变化

角度加载表单上的json文件

1 个答案:

样品