2
回答
augularjs大师,请帮忙看看
华为云实践训练营,热门技术免费实践!>>>   

我项目中有一个

<li class="list-group-item" >
<div class="col-xs-3">电话</div>
<div class="col-xs-7 clear-pd">
<input type="number" name="tel" ng-model="tel" class="form-control" id="exampleInputAmount" placeholder="请输入电话">
</div>
<div class="col-xs-2"><a href="javascript:void(0)" class="pull-right" ><span class="icon iconfont text-red">新增</span></a></div>
</li> 

想实现 点击这个href就增加一行完全一样的input电话,并把原来的一行新增修改为“删除”,新添加的哪一行保持“新增”不变。 这样的如何实现呢?请大师们帮忙看看,不胜感激。

举报
laup
发帖于2年前 2回/363阅
共有2个答案 最后回答: 2年前
<body ng-controller="Ctrl">
<li class="list-group-item" ng-repeat="item in items">
    <div class="col-xs-3">电话</div>
    <div class="col-xs-7 clear-pd">
        <input type="number" name="tel" ng-model="item.tel" class="form-control" id="exampleInputAmount" placeholder="请输入电话">
    </div>

    <div class="col-xs-2">
        <a ng-click="removeItem($index)" class="pull-right" >
            <span class="icon iconfont text-red">删除</span></a>
    </div>
</li>
<li class="list-group-item">
 <div class="col-xs-3">电话</div>
    <div class="col-xs-7 clear-pd">
        <input type="number" name="tel" ng-model="tel" class="form-control" id="exampleInputAmount" placeholder="请输入电话">
    </div>

    <div class="col-xs-2">
        <a ng-click="addItem()" class="pull-right" >
            <span class="icon iconfont text-red">新增</span></a>
    </div>
</li>
<script>
    angular.module('app', [])
            .controller('Ctrl', function($scope) {
                $scope.tel = '';
                $scope.items = [];

                $scope.removeItem = function(index) {
                    $scope.items.splice(index, 1);
                };

                $scope.addItem = function() {
                    $scope.items.push({tel: $scope.tel});
                };
            });
</script>



--- 共有 4 条评论 ---
laup回复 @游走的鱼 : 好的,已经改成功了,谢谢您! 2年前 回复
游走的鱼回复 @laup : input type="number" 会验证模型数据的 必须输入数字的 2年前 回复
游走的鱼回复 @laup : $scope.addItem = function() { $scope.items.push({tel: $scope.tel}); $scope.tel = ''; }; 2年前 回复
laup朋友,很崇拜您!!谢谢!还有个小问题,这个程序可以用,但是电话的值都变成了一样的,输入的时候新增的行都绑定了item.tel 都只能输入同一个号码了,同时会发生变更,这个能解决一下吗?谢谢! 2年前 回复
顶部