Como passar dados da lista AngularJS para o modal Bootstrap?

DiPix

Na minha opinião, tenho uma lista de itens:

<li ng-repeat="fruit in items">
{{fruit.name}} / {{fruit.price}}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">EDIT</button>
</li>

E eu gostaria de editar cada produto usando modal bootstrap. É por isso que preciso passar os dados de um produto específico para modal. Depois disso, simplesmente passarei esses dados para o script angular usando ng-click="saveFruit(dataFruit)"e saveFruitsalvarei os dados.

Aqui está meu violino: http://jsfiddle.net/czus6s3a/

Hopeful Llama

EDIT: Resposta totalmente alterada.

Clique aqui para ver um violino em funcionamento: http://jsfiddle.net/sn8u7kqe/1/ .

Alterações feitas:

No controlador, criei um $scope.dataFruit = null, apenas para garantir que a variável seja inicializada. Eu também criei uma função da seguinte maneira:

$scope.setDataFruit = function(fruit) {
    $scope.dataFruit = fruit;
};

Isso era para garantir que estávamos distribuindo nossos frutos à direita $scope.

Finalmente, eu pedi que você movesse seu <div class="modal">para DENTRO do divque tinha a ng-controllerdiretiva.

O controlador só aplicará seu modelo (variáveis, funções, etc), aos elementos dos quais ele tem visibilidade. De acordo com seu exemplo original, o modal estava FORA do div, portanto, a vinculação de dados não teria se aplicado lá.

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

AngularJS: Passando dados para modal da lista

como passar os dados "src" da imagem (com o endereço da pasta) Modal de bootstrap?

Como passar o estado da seleção da lista no modal para o pai no SwiftUI

Como passar o valor da tabela para o modal de bootstrap para o PHP?

Como passar dados de uma lista de visualização modal para a visualização pai no SwiftUI?

Como faço para passar os dados variáveis do PHP While Loop para Bootstrap Modal?

como passar dados para modal Angular ng-bootstrap para ligação

AngularJS: como passar dados da visualização para o controlador no angularjs

Modal Ngx-bootstrap: como passar dados para o modal component.ts em vez de para o modelo html?

Como passar a marcação html para o modal de bootstrap da interface do usuário?

Como passar os dados do formulário do Bootstrap Modal para o controlador Spring Boot

Como passar os dados de uma linha selecionada para o modal de bootstrap

Angular 2 ng-bootstrap Modal: Como passar dados para o componente de entrada

Angularjs: como passar dados específicos para modal

Como passar dados da lista suspensa para o método de ação para salvar dados usando a chamada ajax post jquery

Como passar um valor para modal e mostrar o modal ao clicar no item da lista plana em react native

Como passar dados do formulário do modal de bootstrap da interface do usuário angular para visualizar

AngularJS: como passar dados da diretiva para a função dos controladores

Como passar dados para o controlador usando modal ui angular?

Como passar o componente modal de dados para o componente pai usando o ng-bootstrap no angular 4

Como passar id para o modal de bootstrap?

passar dados para bootstrap modal de javascript

Como passar dados da visualização para o layout pai?

Como passar dados dinamicamente para a lista de seleção?

Como passar um único elemento da lista para o controlador

NUXT como passar dados da página para o layout

Como passar dados da Reciclerview para o Fragment

Como passar dados da atividade para o fragmento usando OnFragmentInteractionListener

Como passar dados da API para o estado no React