angular 表格动态行

        前端页面需要做成按钮动态控制行数的效果以及对输入内容做一些检验。

        效果图：

        

       html

        

                       <td>
                            <label class="col-sm-2 control-label">关键词配置</label>
                            <table class="table table-striped table-bordered responsive no-m">
                                <tr>
                                    <td width="30%">关键词</td>
                                    <td width="60%">内  容</td>
                                    <td width="10%"><a style="color:red;" ng-click="addKeywordConfig()">增加</a></td>
                                </tr>
                                <tr data-ng-repeat="k in keywords">
                                    <td>
                                        <input required type="input" value="k.keyword"  data-ng-model="$parent.keywords[$index].keyword"
                                         maxlength="32" pattern="^((?!{param.*}).)+$"/>
                                    </td>
                                    <td>
                                        <input required type="input" value="k.text" data-ng-model="$parent.keywords[$index].text"
                                         maxlength="480"/>
                                    </td>
                                    <td>
                                        <a style="color:red;" ng-click="delKeywordConfig($index)">移除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <p>
                                            <span class="help-block text-error" ng-show="showKeywordsContentNotice"
                                                  data-ng-bind="keywordNoticeContent"></span>
                                        </p>
                                        <p>
                                            <span class="help-block text-error" ng-show="showKeywordNotice"
                                                  data-ng-bind="keywordNoticeKeyword"></span>
                                        </p>
                                    </td>
                                </tr>

                            </table>
                        </td>

        js

              

	$scope.keywords = [];

	function Keyword() {
		return{
		keyword:"",text:""
		}
	}

       $scope.addKeywordConfig = function () {
            if ($scope.keywords.length > 3) {
                Tips.info("最多可配置四个参数！");
                return;
            }
            var keyword = new Keyword();
            $scope.keywords.push(keyword);
        };

        $scope.delKeywordConfig = function (idx) {
            $scope.keywords.splice(idx, 1);
        };

        /**
         * 关键词对应内容检测敏感词
         */
        $scope.$watch("keywords",function(newValue, oldValue){
            if(newValue.length < 1) {
                $scope.showKeywordsContentNotice = false;
                $scope.showKeywordNotice = false;
                return;
            }
            var text = "";
            var keyword = "";
            for(var i = 0; i< newValue.length;i++) {
                var newText = newValue[i].text;
                var newKeyword = newValue[i].keyword;
                text += newText+",";
                keyword += newKeyword+",";
            }
            $scope.validateKeywordContent(text);//后台校验逻辑
            $scope.validateKeyword(keyword);//后台校验逻辑

        },true);