3
Wirklich neu zu eckig, aber ich habe diese To-Do-Liste arbeiten. Ich habe eine modale Schaltfläche hinzugefügt und möchte, dass das Aufgabenelement in jedem erstellten Modal aktualisiert wird. Aus irgendeinem Grund kann das Modal nicht den korrekten Namen des Aufgabenelements anzeigen, dem es zugewiesen ist. Es ist fest, dass es für alle Mods auf den Index 0 verweist.Aktualisierung modal mit Daten im Winkel übergeben
second modal still reflecting first
hier ist die html:
<header>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a href="#/">Home</a>
</li>
<li role="presentation">
<a href="#/second">History</a>
</li>
</ul>
</header>
<center>
<div>
<div class="form-group">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered" id="nv">
<div class="row"></div>
<input ng-model="newItem" ng-keypress="addItem($event)" type="text" class="form-control lead" id="nv" placeholder="Add a grocery.">
</div>
</div>
</div>
</center>
<div id="mainBox">
<ul class="list-group checked-list-box" id="repeatBox">
<li class="list-group-item col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered" id="liBox" ng-repeat="x in displayHold" >
<input type="checkbox" ng-model="deleted"></input>
<h7 id="lItem" class="lead" ng-class="{strike: deleted,notActive: deleted}">{{x.item}}</h7>
<button type="button" class="btn btn-default pull-right" ng-click="rmList(x)">
<span class="glyphicon glyphicon-trash" id="icon"></span>
</button>
<button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus" id="icon"></span>
</button>
<div class="container">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="btn btn-default" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{modalItem(x)}}</h4>
</div>
<div class="modal-body lead">
<p>{{displayHold.x}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
und js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/home.html',
controller: 'homeCTRL'
})
.when('/second', {
templateUrl: 'templates/second.html',
controller: 'secondCTRL'
})
.otherwise({
redirectTo: '/'
});
}]);
//services
//history
app.service('carry', function() {
var transferAr = [];
var addList = function(newObj) {
transferAr.push({
item: newObj
});
};
var getList = function() {
return transferAr;
};
return {
addList: addList,
getList: getList,
};
});
//home temporary
app.service('hold', function() {
var holdTransferAr = [];
var holdAddList = function(newObj) {
holdTransferAr.push({
item: newObj
});
};
var holdGetList = function() {
return holdTransferAr;
};
return {
holdAddList: holdAddList,
holdGetList: holdGetList,
};
});
//controllers
app.controller('homeCTRL', ['$scope', 'carry', 'hold', '$log', function($scope, carry, hold, $log) {
$scope.newItem = '';
$scope.addItem = function(e) {
if (e.which === 13) {
hold.holdAddList($scope.newItem);
$scope.newItem = '';
}
};
$scope.displayHold = hold.holdGetList();
$scope.rmList = function(item) {
//get index of displayHold
$scope.index = $scope.displayHold.indexOf(item);
//add it to historylist
carry.addList($scope.displayHold[$scope.index].item);
//remove displayHold
$scope.displayHold.splice($scope.index, 1);
};
$scope.modalItem = function(item){
$scope.index = $scope.displayHold.indexOf(item);
return $scope.displayHold[$scope.index].item;
};
}]);
app.controller('secondCTRL', ['$scope', 'carry', function($scope, carry) {
$scope.controller2Ar = carry.getList();
}]);
second.html
hier ist die index.html
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div ng-view></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Können Sie erklären, was ich falsch gemacht habe, nur zur Klarstellung? Ich verstehe, dass es sich nur auf das anfängliche Modal bezog und jedes Mal, wenn ich ein neues erstellte, wurden die Modale erstellt, aber der Button zeigte nur auf den ersten. – jwhite30
Ok, also hatten Sie mehrere Modale mit der gleichen ID und einem Trigger, der auf diese ID verweist. Der Trigger wurde an das erste Modal gebunden und jedes Mal, wenn Sie auf den Trigger klickten, wurde das erste Modal ausgelöst. – cnorthfield