angularjs: - 带有用户输入值的控制文本框

时间:2016-07-05 10:17:14

标签: javascript angularjs twitter-bootstrap dynamic

我正在尝试创建一个文本框,其中用户将发送参数,我必须在页面上显示文本框..

我将有一个文本框,用户可以在其中提交值,例如:填充或文本颜色,我必须在显示的图像上相应地显示文本

下面的代码是显示我们得到的图像并在其上显示文字: -

  <fieldset class="ng-binding">
            <legend>Upload on form submit</legend>
            Username:
            <input type="text" name="userName" ng-model="username" size="39" required="">
            <i ng-show="myForm.userName.$error.required">*required</i>
            <br> Profile Picture:
            <input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required="">
            <i ng-show="myForm.file.$error.required">*required</i>
            <br> Profile Picture1:
            <input type="file" ngf-select="" ng-model="picFile1" name="file" ngf-accept="'image/*'" required="">
            <i ng-show="myForm.file.$error.required">*required</i>
            <br>

            <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit for pic one</button>
            <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile1)">Submit for pic two</button>
            <img ngf-src="picFile" class="col-md-12 col-xs-6 thumb img img-responsive" style="position:relative">
            <div ng-if="picFile" class="internal" style ="margin:250px 0 0 250px;position:absolute">this is the internal working for file</div>
              <img ngf-src="picFile1" class="col-md-12 col-xs-6 thumb img img-responsive">
              <span class="progress" ng-show="picFile.progress >= 0">
                    <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
                </span>
              <span ng-show="picFile.result">Upload Successful</span>
          </fieldset>

我试图在ng-model的帮助下进行控制,但到目前为止还没有帮助。请帮助..

由于

0 个答案:

没有答案