无法在 table 中添加文本框输入

Question

我有以下代码：

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

这里有一个文本框，当用户向文本框添加内容并按下添加按钮时，输入的文本应添加到 table 这是我的 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
    };

名称没有任何内容，添加了行但名称位置为空？

请注意，这是我的真实代码的简化版本，我有理由使用工厂。大佬能帮我看看为什么这个table没有正确连接到文本框吗？

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 的修改版本（太棒了，设计更改如此）。

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

来自 post 的代码，如果这没有涵盖您想象的某些场景，请告诉我。我尝试摆脱所有样式上的麻烦，这应该在 CSS 中完成，或者使用 bootstrap.

提供的 text-right 或 text-center 之类的东西

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

无法在 table 中添加文本框输入

can not add text box input in table

angularjs

angularjs-directive

angularjs-ng-repeat