Question

我有以下代码：

http://plnkr.co/edit/RqLurBaCsgjQjOYMtl8r?p=preview

这里有一个文本框，当用户在文本框中添加内容并按下添加按钮时，输入的文本应该添加到表中这是我的javaScript代码：

var app = angular.module('app', []);
app.factory('Service', function() {
    var typesHash = [ {
        id : '1',
        name : 'lemon',
        price : 100,
        unit : 2.5
    }, {
        id : '2',
        name : 'meat',
        price : 200,
        unit : 3.3
    } ];
    var service = {
        addTable : addTable,
        getData : getData,


    };
    return service;
    function addTable(data) {

        typesHash.push(data);
    }
    function getData() {
        return typesHash;
    }
});
app.controller('table', function(Service) {
    //get the return data from getData funtion in factory
    this.typesHash = Service.getData();
    this.testData = {
        id : '1',
        name : "test",
        price : 100,
        unit : 2.5
    };
    //get the addtable function from factory 
    this.addTable = Service.addTable;
});

这里testData是静态的，如下所示：

this.testData = {
        id : '1',
        name : "test",
        price : 100,
        unit : 2.5
    };

但是这里没有添加文本框中的文本，所以我更改了上面的代码如下：

this.testData = {
        id : '1',
        name : $("#txt").val(),
        price : 100,
        unit : 2.5
    };

名称什么都没有，行被添加，但名称点是空的？

请注意，这是我的真实代码的简单版本，我有理由使用工厂。可以帮助我找出为什么这个表没有正确连接到文本框？

Answer 1

这是更新的plunker： -

http://plnkr.co/edit/uDIEAjRtpM7MnQu72LAA?p=preview

我在将数据推送到数组之前添加了data.name=$("#txt").val();。

    function addTable(data) {
data.name=$("#txt").val();
            typesHash.push(data);
        }

希望它有所帮助： - ）

Answer 2

plnkr的修改版本（ooo nice design更改SO）。

更新以前粘贴了一个错误的plnkr链接。 http://plnkr.co/edit/4g7LGRLBNEH2LeuEm1qN?p=preview

来自帖子的代码，如果这不包括您想象的某些情景，请告诉我。我试图摆脱所有风格，这应该在CSS中完成，或者使用像bootstrap提供的文本右侧或文本中心这样的东西。

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <title>Insert title here</title>
    <script>
    var app = angular.module('app', []);
    app.factory('Service', function() {
        var typesHash = [ {
            id :1,
            name : 'lemon',
            price : 100,
            unit : 2.5
        }, {
            id : 2,
            name : 'meat',
            price : 200,
            unit : 3.3
        } ];

        var localId = 3;

        var service = {
            addTable : addTable,
            getData : getData,


        };
        return service;
        function addTable(name) {
            typesHash.push({id:localId++, name:name, price:100,unit:1});
        }
        function getData() {
            return typesHash;
        }
    });
    app.controller('table', function(Service) {
        //get the return data from getData funtion in factory
        this.typesHash = Service.getData();
        //get the addtable function from factory 
        this.addTable = Service.addTable;
    });
    </script>
  </head>

  <body ng-app="app" ng-controller="table as tableTools">
    <form>
      <div class="row commonRow">
        <div class="col-xs-1 text-right">
          item:
        </div>
        <div class="col-xs-5">
          <input id="txt" type="text" style="width: 100%;" ng-model="tableTools.inputData" />
        </div>
        <div class="col-xs-2">
          <button class="btn btn-primary" ng-click="tableTools.addTable(tableTools.inputData);tableTools.inputData=''">
                click me
              </button>
        </div>
      </div>  
    </form>

    <div class="row commonRow">
      <div class="col-xs-1"></div>
      <div class="col-xs-10">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>item</th>
            </tr>
          </thead>
          <tbody ng-controller="table as iterateTb">
            <tr ng-repeat="x in iterateTb.typesHash track by x.id">
              <td>
                <div>{{x.name}}</div>
              </td>
              <td>
                <input type="text" ng-model="x.name"/>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

</html>

无法在表格中添加文本框输入

2 个答案: