使用 ng-model 添加对象答案

【问题标题】：Add object using ng-model使用 ng-model 添加对象
【发布时间】：2016-07-12 19:02:07
【问题描述】：

我有一个表单可以像这样更新提交时的值

<form ng-submit="updateMovie()">
    <input type="text" ng-model="movie.title"/>
    <input type="text" ng-model="movie.rating"/>

    //what to attach here at ng-model//
    <input type="text" ng-modal ="movie.__"/>
   there could be many genre inputs based on how many user wants to input

</form>

表单提交的对象将是以下类型。目前让我们忽略 ID。我不知道如何创建流派即对象数组

"id": 4792,
"title": "Insidious",
"rating": "7.0",
"genres": [
  {
    "id": 3,
    "name": "horror"
  },
  {
    "id": 7,
    "name": "Drama"
  }
]

【问题讨论】：

您希望用户输入任何类型的类型还是您有他可以选择的类型？
查看各种可用的多选模块...类似于 tags 在此处处理这些帖子的方式
@developer033 ，用户必须输入它们

标签： javascript angularjs api rest angular-ngmodel

【解决方案1】：

您可以将用户键入并单击按钮的所有内容添加到列表 (movie.genres) 中。

所以你可以有这样的东西：

angular.module("app", [])

.controller('mainCtrl', function($scope) {
  $scope.movie = {};

  $scope.movie.genres = [];
  $scope.add = function() {
    if ($scope.genre) {
      $scope.movie.genres.push($scope.genre);
      $scope.genre = '';
    }
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form ng-submit="updateMovie()">
    <label for="title">Title: </label>
    <input type="text" id="title" ng-model="movie.title">
    <br>
    <label for="rating">Rating: </label>
    <input type="text" id="rating" ng-model="movie.rating">
    <br>
    <label for="genre">Genre: </label>
    <input type="text" id="genre" ng-model="genre">
    <button type="button" ng-click="add()">Add genre</button>
  </form>
</body>

</html>

【讨论】：

是的，这是合适的。但是任何想法如何扩展它以适应多种类型的输入。抱歉没有看到最后的ng-click add
多个类型输入是什么意思？

【解决方案2】：

首先，您尝试允许用户输入任何内容，然后将潜在的随机输入与预定义的数据集相匹配，因此存在固有的设计缺陷。我强烈推荐一种替代方法，例如多选下拉菜单或复选框。即使是自动建议功能将用户限制在一组预定义的类型中，也将是一个巨大的改进。

也就是说，如果您想继续采用这种方法，您可以朝着正确的方向采取措施。

将输入流派的ng-model 与表单数据分离。这意味着在updateMovie() 中，您将根据需要转换数据。

允许用户将流派绑定到一个简单的字符串：

<input type="text" ng-model ="movie.userGenres"/>

在您的 updateMovie() 方法中，根据空格、逗号等分隔数据，并尽可能将其映射到您的流派数组，并发布映射的数据而不是用户输入的字符串。

【讨论】：

【解决方案3】：

您可以使用ngTagInput。

var app = angular.module('app', []);

app.controller('yourCtrl', function() {
    $scope.movie = {
      name: '',
      description: '',
      genre: [],
    };
});


<tags-input id="genre" class="input-border" ng-model="movie.genre"
                            placeholder="Genere for movie"
                            add-on-comma="true"
                            replace-spaces-with-dashes="false"
                            on-tag-added="$tag.text=$tag.text.toLowerCase()"></tags-input>

您需要将流派转换为您想要的格式，因为它类似于以下数组：

[{text: 'genre1'}, {text: 'genre2'}]

【讨论】：

【解决方案4】：

你应该使用 angular ui-select (https://github.com/angular-ui/ui-select) 这可用于选择多个值。这里也有例子http://angular-ui.github.io/ui-select/demo-multiple-selection.html

您还可以实现 on refresh 功能，该功能将返回可用流派列表 + 输入的流派 https://github.com/angular-ui/ui-select/wiki/ui-select-choices

【讨论】：