-2
我如何添加子公司，編輯和刪除我的列表公司（和localStorage） 我有一些代碼刪除，但他們沒有工作 我沒有任何想法如何鎖定它必須如 謝謝你的幫助CODE OF如何創建角色兒童公司名單的公司名單？
if (!localStorage.getItem("companys")) {
localStorage.setItem("companys", JSON.stringify([]));
};
(function() {
var app = angular.module('myApp', []);
app.controller('ListController', function($scope){
this.retrieveCompanys = function() {
return JSON.parse(localStorage.getItem('companys'));
}
this.addToStorage = function(company){
this.companys.push(company);
localStorage.setItem('companys', JSON.stringify(this.companys));
}
this.companys= this.retrieveCompanys();
this.removeCompany = function (item) {
var index= this.companys.indexOf(item);
this.companys.splice(index,1);
}
$scope.add = false;
$scope.togglechild = function() {
$scope.add = !$scope.add;
};
$scope.edit = false;
$scope.toggleedit = function() {
$scope.edit = !$scope.edit;
};
====Delete company======
$scope.removeCompany = function(company) {
var index = $scope.companys.indexOf(company);
$scope.companys.splice(index,1);
}
});
======Child Company========
app.controller('AddController', function(){
this.company = { child: [] };
this.addCompany = function(list) {
list.addToStorage(this.company);
this.company = {child: [] };
};
});
app.controller('ChildController', function(){
this.child = {};
this.addChild = function(company) {
company.childs.push(this.company);
this.child = {}
}
});
})();
HTML部分
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body class="container" ng-controller="ListController as list">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-controller = "AddController as addCtrl">
<form name="addCompanyForm" ng-submit="addCtrl.addCompany(list)" novalidate>
<h3 class="text-center">Add new company</h3>
<fieldset class="form-group">
<input class="form-control" ng-model="addCtrl.company.name_company" placeholder="Name Company" title="Name Company" ng-required>
</fieldset>
<fieldset class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" ng-model="addCtrl.company.annual_earnings" placeholder="Annual earnings" title="Annual earnings" ng-required>
</div>
</fieldset>
<br>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-click="addCompany(list)" value="Add Company">
</fieldset>
</form>
<form ng-show="add">
<h3 class="text-center">Add child company</h3>
<fieldset class="form-group">
<input class="form-control" ng-model="addCtrl.company.name_company" placeholder="Name Company" title="Name Company" ng-required>
</fieldset>
<fieldset class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" ng-model="addCtrl.company.annual_earnings" placeholder="Annual earnings" title="Annual earnings" ng-required>
</div>
</fieldset>
<br>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-click="addCompany(list)" value="Add Company">
</fieldset>
</form>
<form ng-show="edit">
<h3 class="text-center">Edit data company</h3>
<fieldset class="form-group">
<input class="form-control" ng-model="addCtrl.company.name_company" placeholder="Name Company" title="Name Company" ng-required>
</fieldset>
<fieldset class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" ng-model="addCtrl.company.annual_earnings" placeholder="Annual earnings" title="Annual earnings" ng-required>
</div>
</fieldset>
<br>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-click="addCompany(list)" value="Edit Data">
</fieldset>
</form>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" >
<h3 class="text-center">List of Company</h3>
<table class="table">
<!--=========Table Head==============-->
<tr>
<th class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Name Company</th>
<th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Own earnings</th>
<th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Total earnings</th>
<th class="col-xs-1 col-sm-2 col-md-2 col-lg-2 text-center">Edit/Delete</th>
</tr>
<!--===================MAIN COMPANY=====================-->
<tr ng-repeat="company in list.companys track by $index">
<td class="col-xs-6 col-sm-6 col-md-6 col-lg-5 text-center">
<a href="#{{'demo'+$index}}" data-toggle="collapse">List</a>
<b>{{company.name_company}}</b>
</td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
{{company.annual_earnings + "$"}}
</td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
</td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
<a ng-click="toggleedit()" title="Edit Data">Edit</a> | 
<a ng-click="removeCompany(company)" title="Delete"><b>x</b></a> | 
<a ng-click="togglechild()" title="Add Child Company"><b>+</b></a>
</td>
<tr id="{{'demo'+$index}}" class="collapse">
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
</tr>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<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>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
你想維護三個控制器嗎？ –