Question

JAVASCRIPT：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.rtcdemo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.rtcdemo.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

并添加了value属性，但未显示。我认为它与ngModel属性有关，不允许改变价值，但我已经在AngularJS文档的某个地方看到了，以编程方式设置值是可能的，那么有人可以告诉我如何做到这一点吗？

HTML：

.directive('search', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$set('value', 'Word...');
            console.log(attrs);
        }
    };
}]);

编辑最后，我想让它做一些简单的事情，比如显示类似搜索项目......＆＃39;在集中注意力之前，将焦点设置为＆＃39;＆＃39;并且当模糊时，检查值是否为＆＃39;＆＃39;并将其设置回＆＃39;搜索项目...＆＃39;。

我知道它非常简单，而且我已经使用外部JS功能进行了一次这项工作，但我觉得这不是最好的解决方案，可能涉及到＆＃34; getElementById＆＃34; ，我认为AngularJS必须可以通过链接功能，它只是因为我不知道如何...

编辑2：与占位符不同。有办法解决这个问题吗？比方说，如果我需要实现与我在第一次编辑中所描述的不同的东西？

Answer 1

这样的东西？

.directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defText = attrs.search;

        ngModel.$render = function(val) {
          var text = (!val && val !== 0) ? defText : val;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defText);
        });

      }
    };
  }
]);

angular.module('app', []).directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defText = attrs.search;

        ngModel.$render = function(val) {
          var text = (!val && val !== 0) ? defText : val;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defText);
        });

      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
  <input type="text" ng-model="query" search="Word..." />{{query}}
</div>

Answer 2

placeholder属性指定一个描述输入字段预期值的简短提示（例如样本值或预期格式的简短描述）。

举个例子，

<input type="text" ng-model="searchUser" placeholder="Enter a name to search." class="form-control search-filter">

您在寻找这个吗？

Answer 3

您可以使用onfocus＆amp; onblur更改占位符：

<input 
  type="text" 
  ng-model="searchUser" 
  placeholder="Search for items" 
  onfocus="this.placeholder = ''" 
  onblur="this.placeholder = 'Search for items'"
  class="form-control search-filter"
 >

如何在不影响其ngModel的情况下设置AngularJS中的输入值

3 个答案: