具有动态属性的输入字段另存为未定义的 MEAN 堆栈应用程序答案

【问题标题】：Input field with dynamic attribute saves as undefined, MEAN stack application具有动态属性的输入字段另存为未定义的 MEAN 堆栈应用程序
【发布时间】：2017-02-20 18:12:47
【问题描述】：

为什么动态属性的值在我的表单中保存为“未定义”？我认为它与隐藏输入有关，但当它不隐藏时它会做同样的事情。

保存新事件时，我希望用户单击图像并将该图像的 URL 保存为 img_url 下的字符串。普通文本输入“event_name”保存得很好。单击功能工作正常 - 单击图片时它会保存 img_url 的值，我使用控制台日志检查了这一点。它只是保存为未定义。

html:

<div ng-app="event" ng-controller="eventController">
  <form>
        <input id="event_name" type="text" name="event_name" ng-model="formData.event_name">
    <label for="event_name">Event name</label>
    <p>Choose an image:</p>
    <ul>
      <li class="images"><img src="/images/e1.png"></li>
      <li class="images"><img src="/images/e2.png"></li>
      <li class="images"><img src="/images/e3.png"></li>
    </ul>
    <input id="img_url" name="img_url" type="hidden" ng-model="formData.img_url">
   </form>
 </div>

JQuery（在 init.js 中）：

$(document).ready(function(){
    var url = '';
 $('.images').click(function(){
      url =  $(this).find('img').attr('src');
      $('#img_url').val(url);
    });
 });

【问题讨论】：

标签： jquery html angularjs node.js mongodb

【解决方案1】：

由于您将值设置在角度范围之外，因此您需要先获取范围，然后尝试在 scope.apply() 中分配值，如下所示

$(document).ready(function(){
    var url = '';
 $('.images').click(function(){
      var appElement = document.querySelector('[ng-app=event]');
      var $scope = angular.element(appElement).scope();
      url=$(this).find('img').attr('src');
      $scope.$apply(function () {
            $scope.formData.img_url = url;
      });


    });
 });

【讨论】：

谢谢！很有魅力

【解决方案2】：

$(document).ready(function(){
var url = '';
$('li').click(function(){
  url =  $('li.images> img').attr('src');
  $('#img_url').val(url);
});
});

试一试

【讨论】：