使用 ng-model 添加对象

Question

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

<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"
  }
]

Answer 1

首先，你有一个固有的设计缺陷，你试图让用户输入 任何东西 然后匹配潜在的随机输入到一组预定义的数据。我强烈推荐一种替代方法，例如 multi-select 下拉菜单或复选框。即使将用户限制在一组预定义的流派中的自动建议功能也会是一个巨大的改进。

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

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

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

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

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

Answer 2

您可以将用户键入并单击按钮的所有内容添加到列表 (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>

Answer 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'}]

Answer 4

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

您还可以实现刷新功能，这将 return 可用流派列表 + 输入的流派 https://github.com/angular-ui/ui-select/wiki/ui-select-choices

使用 ng-model 添加对象

Add object using ng-model

javascript

api

rest

angularjs

angular-ngmodel