【问题标题】:Save element text instead of input保存元素文本而不是输入
【发布时间】:2015-11-19 14:46:29
【问题描述】:

我创建了一个输入字段,用户可以在其中输入电影标题并单击将标题插入数据库的 div。但我想要的不是保存用户输入,而是将文本值保存在单击的元素中。

这是目前的情况,

%div{"ng-click" => "addMovie()"}
  %input{:type => "text", "ng-model" => "title"}
  addMovie action.

我想要什么,

%div{"ng-click" => "addMovie()"}
  %span.title{"ng-model" => "title"}
    {{ movie.original_title }}

现在,当用户点击 div 时,它应该将文本(movie.original_title)保存在 span 标签内。

控制器,

$scope.addMovie = function() {

  if(!$scope.title || $scope.title === '') { return; }
  movies.create({
    title: $scope.title,
  }).then(init);

  $scope.title = '';
};

但我不确定在哪里更改,我仍然可以使用 ng-model 分配 title 还是应该在控制器中更改它?

这就是标题的显示方式。用户可以搜索电影标题,并创建一个包含所有标题的下拉列表。我希望用户点击.addmovie div,它应该保存标题、发布日期等内容。

%input{"ng-change" => "search(searchquery)", "ng-model" => "searchquery", "ng-model-options" => "{ debounce: 500 }", :id => "search_input", :placeholder => "Search a movie!"}
%ul#showresults
  %li.search_results{"ng-repeat" => "movie in movieList"}
    .addmovie
      %span
        Add Movie
    %img{"ng-src" => "http://image.tmdb.org/t/p/w500/{{ movie.poster_path }}"}
    %span
      {{ movie.original_title }}

编辑接近答案,这很简单

$scope.addMovie = function() {
    movies.create({
      title: $('.title').text(),
    }).then(init);
  };

现在的问题是它保存了所有的.titles 而不是点击的那个,但这应该很容易解决。

【问题讨论】:

  • 不是 100% 清楚 ui 将是什么,因为 span 没有使用 ng-model 的实际用例。 title 现在来自哪里?你到底想保存什么?更好的书面文字描述会有所帮助可能只是想将整个电影对象作为参数传递给您的函数
  • 除非您自己用电影标题填充span 元素供用户选择以添加到某个表中,否则我真的看不到用户自己添加标题的方法跨度>
  • 更改为 addMovie(movie) 这样 ng-click 仅注册该对象,然后在您的 js 中进行相应操作
  • @Rafa 并没有解决目标问题。

标签: jquery angularjs


【解决方案1】:

我不确定这是否应该这样做,但它对我有用。

$scope.addMovie = function() {
  movies.create({
    title: $(event.currentTarget).parent().find('.title').text()
  }).then(init);
};

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-12-18
    • 1970-01-01
    • 1970-01-01
    • 2011-11-20
    • 2011-03-11
    • 2021-03-30
    • 2017-01-25
    相关资源
    最近更新 更多