angularjs - 动态改变输入附加的字形

Question

如何在验证输入类型时更改 **glyphicon"（输入字段右侧（见下文））？

例如。当输入有效时，将其更改为glyphicon-ok（勾号）或当输入无效时将其更改为glyphicon-remove（十字符号）

vm.rentalFields = [
    {
        key: 'first_name',
        type: 'input',
     //   class:glyphicon-ok,

        templateOptions: {

            type: 'text',
            label: 'First Name',
            placeholder: 'Enter your first name',

            required: true,
            "addonRight": {
                "class": "glyphicon glyphicon-ok form-control-feedback"
              }




        }
    }];

Answer 1

使用 angular-formly，如果你想要任何东西是动态的，你可以使用expressionProperties. 因为您希望 的class属性addonRight是动态的，所以您的expressionProperties属性将是：

'templateOptions.addonRight.class': '"glyphicon form-control-feedback glyphicon-" + (fc.$valid ? "ok" : "remove")'

的值expressionProperties被称为正式表达式，这基本上意味着它们可以是在formly-field's$scope或传递的函数上评估的字符串，($viewValue, $modelValue, scope)并且可以返回值或解析为该值的承诺。

您在该fc表达式中看到的options.formControl是分配给您的字段的快捷方式NgModelController（这就是您有权访问$valid.

在一天结束时，您的字段配置将如下所示：

vm.rentalFields = [
  {
    key: 'first_name',
    type: 'input',
    templateOptions: {
      type: 'text',
      label: 'First Name',
      placeholder: 'Enter your first name',
      required: true,
      addonRight: {
        class: 'glyphicon glyphicon-ok form-control-feedback' // <-- initialized to a valid state
      }
    },
    expressionProperties: {
      'templateOptions.addonRight.class': '"glyphicon form-control-feedback glyphicon-" + (fc.$valid ? "ok" : "remove")'
    }
  }
];

Answer 2

你需要在存储glyphicon的容器上添加ng-class，然后有条件地检查一个存储输入有效性的变量。例如，这是使用表单的方法：

    <form class="form-inline" name="myForm">
       <input type="text" class="form-control" name="firstName" ng-model="firstName" ng-maxlength="5" /> 
       <span class="glyphicon" ng-class="{'glyphicon-ok': myForm.firstName.$valid, 'glyphicon-remove': myForm.firstName.$invalid}"></span> 
    </form>

其中 myForm.firstName.$invalid 是您设置 glyphicon 的条件。（由输入上的 ng-maxlength 指令设置，请参见：https ://docs.angularjs.org/api/ng/directive/input ）。

或者，您可以根据您在控制器中找出的一些规则，使用单独的变量来存储输入的有效性。

看到这个小提琴：http: //jsfiddle.net/HB7LU/14198/

Answer 3

这将起作用：

<span class="glyphicon green" ng-class="{'glyphicon-ok': {{single_request.status}}==1, 'glyphicon-remove': {{single_request.status}}==0 }" ></span>