Angularjs 无法在表中添加文本框输入_Angularjs_Angularjs Directive_Angularjs Ng Repeat

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

angularjs

Angularjs 无法在表中添加文本框输入,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,我有以下代码：这里有一个文本框，当用户向文本框添加内容并按下add按钮时，输入的文本应添加到表中。这是我的javaScript代码： var app = angular.module('app', []); app.factory('Service', function() { var typesHash = [ { id : '1', name : 'lemon', price : 100, unit : 2.5

我有以下代码：

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

名称不获取任何内容，并且添加了行，但名称点为空

请注意，这是我真实代码的一个更简单版本，我有理由使用factory。

有人能帮我找出此表未正确连接到文本框的原因吗？

以下是更新的plunker：-

我刚刚添加了数据。name=$txt.val；在将数据推入数组之前

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

希望对您有所帮助：-

修改版的plnkr ooo nice设计改变如此之大

更新之前粘贴了一个错误的plnkr链接。

来自帖子的代码，如果这不包括你想象的场景，请告诉我。我试着摆脱所有的风格障碍，这应该在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>

@charlietfl你的建议是什么？@charlietfl我同意你的观点我们不应该使用$scope.model来解决这个问题，但这只是一个解决问题的技巧。它没有说这是一个技巧。当坏习惯长期存在时，人们不会学到东西，是吗？事实上，当我第一次看到代码时，我也在思考同样的问题。我试图找到有棱角的路，但我找不到。很抱歉，如果我能找到一些东西，我会更新它。我们不能使用ng模型，因为该输入超出了控制器的作用域：-puse ng model将输入绑定到作用域对象。在角度输入中不使用值。如果你想学习angular…将jQuery.js从页面中移除，直到你需要一个插件，而这个插件是无法使用angularI完成的。下面还有一个补充说明，你可能想查看angular-x-editable，因为它有助于整个可编辑表业务。。。我已经非常成功地混合了ng表格用于排序/分页/标题，angular-x-editable用于可取消的编辑/保存选项。也同意上面的评论，把jQuery放在后面如果你可以或者只是学习编写指令，并且只在需要DOM操作的地方使用它，你可能会发现内置指令和第三方指令已经涵盖了你想要做的大部分事情。