前端页面需要做成按钮动态控制行数的效果以及对输入内容做一些检验。
效果图:
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);