Question

我环顾四周，找到了几个标有'ng-placeholder'的资源或类似的东西。我不能让这个工作：

<input type="text" placeholder="{{option.name}}" class="form-control" ng-switch-when="text" />

我注意到input documentation上似乎没有任何内容。我对角度很新，而这几乎没有让我感到沮丧几个小时。必须有办法做到这一点。

Answer 1

为什么不为ng-placeholder编写自己的指令？像这样简单的东西应该有效。你可以在你的html中调用它

<input ng-placeholder='test'>

其中test是当前控制器中的范围变量。

.directive('ngPlaceholder', function($document) {
  return {
    restrict: 'A',
    scope: {
      placeholder: '=ngPlaceholder'
    },
    link: function(scope, elem, attr) {
      scope.$watch('placeholder',function() {
        elem[0].placeholder = scope.placeholder;
      });
    }
  }
});

Answer 2

AngularJS ng-attr-{property_name}中存在一个条件属性属性

例如，我使用不同的占位符表示不同的搜索字词，

 ng-attr-placeholder="{{isAdvanceSearch ? setPlaceholder(searchOption) : 'John Smith, 08/23/1970, 123'}}"

这里基于isAdvanceSearch变量，我在setPlaceholder方法中设置了不同的占位符。

setPlaceholder方法返回占位符，以在输入字段中进行设置。

$scope.setPlaceholder = function(searchOption) {
     if (searchOption === "foo") {
          return "Search by foo… e.g. foo1";
     } else if (searchOption === "bar") {
          return "Search by bar… e.g. bar123";
     } else {
          return "John Smith, 08/23/1970, 123";
     }
};

注意：John Smith, 08/23/1970, 123是默认的占位符。不要忘记将表达式包装在{{}}括号中。

使用angular渲染动态占位符

2 个答案: