Добавить объект с помощью нг-модель

У меня есть форма, которая обновляет значения на представить, как этотДобавить объект с помощью нг-модель

<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": 4792, 
"title": "Insidious", 
"rating": "7.0", 
"genres": [ 
    { 
    "id": 3, 
    "name": "horror" 
    }, 
    { 
    "id": 7, 
    "name": "Drama" 
    } 
]

источник

2016-07-12 Invictus

Вы хотите, чтобы пользователь должен набрать какой-либо из рода жанра или у вас есть жанры, которые он может выбирать? – developer033

Посмотрите на различные доступные несколько модулей ... похоже на способ работы с тегами здесь. – charlietfl

@ developer033, пользователь должен набрать их – Invictus

Вы можете добавить в список (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>

источник

2016-07-12 19:12:35 developer033

да, что было бы уместно. Но любая идея, как продлить это для нескольких жанровых входов. К сожалению, в конце не было добавлено ng-click – Invictus

Что вы имеете в виду с * несколькими * входами жанра? – developer033

Во-первых, у вас есть неотъемлемое недостаток дизайна, пытаясь разрешить пользователю вводить ничего, а затем сопоставить что потенциально случайный ввод в предопределенный набор данных. Я бы настоятельно рекомендовал альтернативный метод, такой как выпадающие меню с несколькими выборами или флажки. Даже функция автоматического предложения, которая ограничивала пользователя заранее определенным набором жанров, была бы огромным улучшением.

При этом, если вы хотите продолжить этот подход, вы можете предпринять шаги в правильном направлении.

Отмените свой ng-model для введенных жанров (-ов) из данных формы. Это означает, что в updateMovie() вы преобразуете данные по мере необходимости.

Позволяет пользователю связать жанр простой строки:

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

В вашем методе updateMovie(), разграничить данные, основанные на пространства, запятые и т.д., и отобразить его на жанры массив, если это возможно, и пост, который вместо введенной строки пользователя.

источник

2016-07-12 19:07:46

-1

Вы можете использовать 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'}]

источник

2016-07-12 19:13:00

Любые конкретные причины для голосования? –

-1

вы должны использовать угловые UI-выберите (https://github.com/angular-ui/ui-select) Это может быть использовано для выбора нескольких значений. здесь также примеры http://angular-ui.github.io/ui-select/demo-multiple-selection.html

вы также можете реализовать свою на функцию обновления, которая будет возвращать список доступных жанров + вводимого жанр https://github.com/angular-ui/ui-select/wiki/ui-select-choices

источник

2016-07-12 19:22:35 kafbuddy

Добавить объект с помощью нг-модель

ответ

Смежные вопросы