0
私は値をとり、firebase配列のオブジェクトに保存するフォームを設定しました。 ng-repeatを使用して、その配列の各オブジェクトを「ダッシュボード」ページに表示しました。私はチェックボックスで作成される特定のオブジェクトを変更できるようにしたい。私は特定のオブジェクトを取得する方法を把握することはできません。ここでng-repeatの対象特定オブジェクトインデックス/ id
var app = angular.module('app', ['ngRoute','firebase','ngMaterial']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/second', {
templateUrl: 'templates/second.html',
controller: 'homeCTRL'
})
.when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'homeCTRL'
})
.when('/vehicles', {
templateUrl: 'templates/vehicles.html',
controller: 'homeCTRL'
})
.otherwise({
redirectTo: '/dashboard'
});
}]);
//controllers
app.controller('homeCTRL', ['$scope', '$log','$firebaseArray', function($scope,$log,$firebaseArray) {
var ref = new Firebase("https://asgtodo.firebaseio.com");
$scope.newItem = '';
$scope.FBproject= $firebaseArray(ref.child('project'));
$scope.FBhistory = $firebaseArray(ref.child('history'));
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
$scope.pipeCompleted = false;
$scope.addItem = function() {
$scope.FBproject.$add({
projectName: $scope.projectName,
dateStart: $scope.dateStart,
dateEnd: $scope.dateEnd,
signChecked: $scope.signChecked,
paintChecked: $scope.paintChecked,
blastChecked: $scope.blastChecked,
labelChecked: $scope.labelChecked,
yellowMacro: $scope.yellowMacro,
redMacro: $scope.redMacro,
otherPaint: $scope.otherPaint,
pipeFootage: $scope.pipeFootage,
maxHeight: $scope.maxHeight,
liftSmall: $scope.liftSmall,
liftLarge: $scope.liftLarge,
liftBoom: $scope.liftBoom,
pipeCompleted: $scope.pipeCompleted
});
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
};
$scope.changePipe = function(x){
$scope.index = $scope.FBproject.indexOf(x);
};
$scope.rmList = function(item) {
//get index of displayHold
$scope.index = $scope.FBproject.indexOf(item);
//add it to historylist
$scope.FBhistory.$add($scope.FBproject[$scope.index]);
$scope.FBproject.$remove($scope.FBproject[$scope.index]);
};
$scope.modalItem = function(item){
return null;
};
}]);
app.controller('secondCTRL', ['$scope', function($scope) {
}]);
は、HTML
<!-- MODAL BUTTON -->
<div style="margin-top: 6em;">
<div class="row animated shake">
<div class="col s6 m5 l5">
<center>
<a class="btn-floating btn-large waves-effect waves-dark blue modal-trigger" id="modal" href="#modal1">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
</div>
<!-- MODAL -->
<div id="modal1" class="modal bottom-sheet white" style="height: 100%; opacity: 0.8">
<div class="modal-content white blue-text">
<div class="row">
<form>
<div class="row animated rollIn">
<div class="input-field col s12 m6 l6">
<input id="projName" type="text" ng-model="projectName">
<label id="projNameLabel">Project Name</label>
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">Start Date</label>
<input id="projDate" type="date" class="datepicker " ng-model="dateStart">
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">End Date</label>
<input id="projDate" type="date" class="datepicker" ng-model="dateEnd">
</div>
</div>
<div class="row">
<div class="col s12 m2 l2">
<center>
<form action="#">
<p class="padBoxes">
<input type="checkbox" id="Signs" class="Materialize.showStaggeredList('#test')" ng-model="signChecked"/>
<label for="Signs">Signs</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Paint" ng-model="paintChecked"/>
<label for="Paint">Paint</label>
</p>
<p ng-show="paintChecked" style="margin-left: 15px;" class="padBoxes">
<input type="checkbox" id="Blast" ng-model="blastChecked"/>
<label for="Blast">Blast</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Labels" ng-model="labelChecked"/>
<label for="Labels">Labels</label>
</p>
</form>
</center>
</div>
<div class="col s12 m3 l3 z-depth-5" style="margin-right: 10px;" ng-show="paintChecked">
<center class="animated fadeIn">
<form action="#">
<div class="indigo z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Paint</h5>
</p>
</div>
<p class="range-field padBoxes">
<label for="Labels">Yellow 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="yellowMacro"/>
</p>
<p class="range-field padBoxes">
<label for="Labels">Red 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="redMacro"/>
</p>
<p class="input-field padBoxes">
<input id="projName" type="text" ng-model="otherPaint">
<label>Other</label>
</p>
</form>
</center>
</div>
<div class="col s12 m2 l3 z-depth-3" style="margin-right: 10px;" ng-show="signChecked">
<form action="#">
<div class="col s12 animated fadeIn">
<center>
<div class="red z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Signs</h5>
</p>
</div>
<p class="input-field">
<input id="projName padBoxes" type="text" ng-model="pipeFootage">
<label>Pipe Footage</label>
</p>
<p class="range-field padBoxes">
<label for="Labels ">Max Height</label>
<input type="range" id="test5" min="0" max="50" ng-model="maxHeight"/>
</p>
</center>
</div>
</form>
</div>
<div class="col s12 m2 l2 " style="margin-right: 10px;" ng-show="signChecked || labelChecked">
<center>
<p >
<input type="checkbox" id="liftSmall" ng-model="liftSmall"/>
<label for="liftSmall">Lift 3246</label>
</p>
<p >
<input type="checkbox" id="liftLarge" ng-model="liftLarge"/>
<label for="liftLarge">Lift 4069</label>
</p>
<p >
<input type="checkbox" id="liftBoom" ng-model="liftBoom"/>
<label for="liftBoom">Lift BOOM!</label>
</p>
</center>
</div>
</div>
</div>
</form>
</div>
<div class="input-field col s12 m2 l2 padBoxes" style="margin: -50px;">
<center>
<a href="#!" class="modal-action modal-close waves-effect waves-dark btn-flat z-depth-2">
<i class="material-icons" style="font-size: 3em;">close</i>
</a>
<a class="btn-floating btn-large waves-effect waves-dark blue z-depth-2" onclick="Materialize.toast('Project Added', 4000)" ng-click="addItem()">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
<!-- FBproject -->
<div class="container row" style="margin-top: 4em; ">
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="x in FBproject track by $index">
<div class="collapsible-header waves-effect waves-dark">
<div class="col s2 m2 l1">
<center>
<i class="material-icons">folder-open</i>
</center>
</div>
<div class="col s5 m2 l2">
{{x.projectName}}
</div>
<div class="col s12 m5 l4">
<center>
<div class="chip">Signs</div>
<div class="chip">Paint</div>
<div class="chip">Labels</div>
</center>
</div>
</div>
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="{{}}" />
<label for="pipe">Pipe Ordered</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="hotel">Hotel</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="lifts">
<h7>lifts</h7>
</label>
</p>
<a class="btn-floating btn-large waves-effect waves-dark red" ng-click="rmList(x)">
<i class="material-icons">delete_forever</i>
</a>
</form>
</center>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.collapsible').collapsible({accordion: false});
$('.modal-trigger').leanModal({dismissible: true, opacity: .50, in_duration: 300, out_duration: 200});
$('.datepicker').pickadate({selectMonths: true, selectYears: 15, container: 'body'});
$('select').material_select({container: 'body'});
$(".button-collapse").sideNav();
});
</script>
index.htmlを
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="main.css"/>
</head>
<body ng-cloak>
<div>
<div class="fixed-action-btn horizontal click-to-toggle" style="top: 5px; center: 24px;">
<a class="btn-floating waves-effect waves-dark btn-large">
<i class="material-icons">menu</i>
</a>
<ul>
<li>
<a href="#/dashboard" class="btn-floating waves-effect waves-dark btn-large yellow darken-1">
<i class="material-icons">dashboard</i>
</a>
</li>
<li>
<a href="#/second" class="btn-floating waves-effect waves-dark blue btn-large green darken-1">
<i class="material-icons">find_in_page</i>
</a>
</li>
<li>
<a href="#/vehicles" class="btn-floating waves-effect waves-dark btn-large red darken-1">
<i class="material-icons">directions_car</i>
</a>
</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
セクションで質問ですか？
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="x.pipeCompleted{{index}}"/> <!-- what do I put here ?? to get the specific object-->
<label for="pipe">Pipe Ordered</label>
</p>
<p>
イムは、それが$インデックスによってFBprojectトラックでXとは何かを持っていますが、私はそれを使用する方法を知らないことを推測:( – jwhite30