1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > angular 表格动态行

angular 表格动态行

时间:2022-10-24 14:29:24

相关推荐

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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。