最后创建一个内置取消符号的按钮/标签

Question

我正在尝试使用html创建一个需要类似于以下图像的按钮/标签的页面： 我不确定这些按钮是什么叫。最终我想动态创建它们，因为需要创建的按钮与不同的用户不同。 任何建议都非常感谢。感谢。

Answer 1

这些东西叫做 Chips 。如果您使用角度，则可以查看演示here。

Answer 2

您可以使用jQuery或核心javascript实现此类功能。

您可以使用此jquery readymade插件 演示 - http://xoxco.com/projects/code/tagsinput/example.html

GitHub链接：https://github.com/xoxco/jQuery-Tags-Input

Answer 3

Angularjs中的解决方案是为您的表单创建一个控制器，用于确定是否允许浏览器显示您的取消按钮。这可以使用以下代码创建：

  var app = angular.module('formExample', [])
  app.controller('ExampleController', ['$scope', function($scope) {
     $scope.canCancel = false;
     $scope.updateCancelVal = function(myForm) {
     $scope.canCancel = $scope.myForm.$valid;
     };
  }]);

然后在你的HTML中，它看起来像：

 <div ng-controller="ExampleController">
    <form name="myFormName">
       Name: <input ng-keyup="updatCancelVal(myFormName)" type="text" ng-model="user.name" /><br>
       Email: <input ng-keyup="updatCancelVal(myFormName)" type="email" ng-model="user.email" /><br>
       <button ng-show="canCancel" href="myCancelLink.html"> Cancel </button>
    </form>
 </div>

最终，这使得只有当canCancel为true时才会显示“取消”按钮。并且在每个单独输入中的每个键输入上，此值将更新，直到表单有效。如果您需要更多帮助来实现这一点，将添加lmk和更多细节！