如何在AngularJS的ng-click事件中基于输入框值向数组添加对象至表格

我看了你的代码，发现几个小问题导致功能无法正常工作，现在帮你修正并实现你想要的功能：点击Add按钮时把输入框的技术名称添加到表格，同时往数组里新增对象。

问题分析 #

• 输入框没有通过ng-model绑定到$scope变量，所以点击按钮时拿不到用户输入的内容
• addRecord函数里误用了$scope.technology.push，你的数组其实是$scope.technologies（复数形式）
• Add按钮的ng-click参数错误，应该传入绑定的输入框变量，而不是未定义的technology

修正后的完整代码 #

JavaScript部分

var app = angular.module("myApp",[]); 
app.controller("myCtrl", function($scope){ 
    $scope.technologies = [ 
        {name:'C#', likes:'0', dislikes:'0'}, 
        {name:'.Net', likes:'0', dislikes:'0'}, 
        {name:'Java', likes:'0', dislikes:'0'}, 
        {name:'MySQL', likes:'0', dislikes:'0'} 
    ]; 
    $scope.incrementlikes = function(technology){ 
        technology.likes++; 
    } 
    $scope.incrementdislikes = function(technology){ 
        technology.dislikes++; 
    } 
    $scope.addRecord = function(){ 
        // 确保输入不为空再添加
        if($scope.newTechName) {
            $scope.technologies.push({name: $scope.newTechName, likes:'0', dislikes:'0'});
            // 添加后清空输入框，提升体验
            $scope.newTechName = '';
        }
    } 
});

CSS部分（保持不变）

table, th, tr, td { 
    border: 2px solid #fff; 
    border-collapse: collapse; 
} 
td, th { 
    background: #006688; 
    color: #fff; 
    padding: 5px; 
}

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<div ng-app="myApp" ng-controller="myCtrl"> 
    <table style="width:400px;"> 
        <tr> 
            <td align="right">Enter Technologies : </td> 
            <td><input type="text" ng-model="newTechName" placeholder="输入技术名称"/></td> 
            <td><input type="button" value="Add" ng-click="addRecord();" /></td> 
        </tr> 
    </table> 
    <table style="width:400px;"> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Likes</th> 
                <th>Dislikes</th> 
                <th>Likes / Dislikes</th> 
            </tr> 
        </thead>
        <tbody>
            <tr ng-repeat="technology in technologies"> 
                <td>{{technology.name}}</td> 
                <td align="center">{{technology.likes}}</td> 
                <td align="center">{{technology.dislikes}}</td> 
                <td align="center"> 
                    <input type="button" value="Likes" ng-click="incrementlikes(technology);" /> 
                    <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" /> 
                </td> 
            </tr>
        </tbody>
    </table> 
</div>

关键修改说明 #

1. 给输入框添加了ng-model="newTechName"，这样用户输入的内容会自动绑定到$scope.newTechName，方便后续获取
2. 修改了addRecord函数：
   • 不再需要传参，直接从$scope获取输入值
   • 添加了非空判断，避免添加空记录
   • 添加后自动清空输入框，提升用户体验
3. 修正了Add按钮的ng-click，改为直接调用addRecord()（无需传参）
4. 把表格的ng-repeat移到了<tbody>标签内，这是更规范的HTML结构，避免渲染异常

现在点击Add按钮，就能把输入的技术名称添加到表格里，同时数组technologies也会新增对应的对象啦！

内容的提问来源于stack exchange，提问作者Samudrala Ramu