我点击编辑之后ng-click 调用editbuilding方法
$scope.editbuilding = function(item){
console.log(item);
$scope.buildEditor = {id:item.id,name:item.name,maxfloor:item.maxfloor};
//$scope.build = item.owner_id;
}
我的前端页面是这样的
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">楼长:</label>
<div class="col-sm-7">
<select class="form-control" ng-model="currentUser" ng-options="p.username for p in user" required="">
<option class="form-control" >请选择</option>
</select>
</div>
</div>
请问各位我怎么点编辑的时候让楼长这个人回显出来?
写个例子,不知道是不是你想要的
<table style="border: 1px solid #ddd;width: 600px;">
<tr ng-repeat="lis in list" ">
<td>{{lis.id}}</td>
<td>{{lis.name}}</td>
<td>{{lis.age}}</td>
<td style="cursor: pointer;" ng-click="eidt(lis)">编辑</td>
</tr>
</table>
<form action="" method="post">
<input type="text" value="" ng-model="formInitVal.id"/>
<input type="text" value="" ng-model="formInitVal.name"/>
<select ng-model="currentUser" required="" style="width: 150px;">
<option ng-repeat="p in age" ng-click="chose(p)">{{p}}</option>
</select>
</form>
$scope.list=[{id:1,name:'a',age:'1'},{id:2,name:'b',age:'2'},{id:3,name:'c',age:'3'}];
$scope.age=[1,2,3,4,5,6];
$scope.eidt=function(lis){
$scope.formInitVal=lis;
$scope.currentUser=lis.age;
}
$scope.chose=function(age){
for(var i in $scope.list){
if($scope.formInitVal.id==$scope.list[i].id){
$scope.list[i].age=age;
}
}
}
控制器里给$scope.currentUser赋值
主面板可以这样写<div ng-repeat = "data in dataList" mc-directive></div>
面板上的各种操作写在自定义指令mc-directive里,然后点击的时候给赋值像这样:
$scope.clickme = () => {
$scope.id = $scope.data.id
$scope.currentUser = $scope.data.currentUser
..........
}
最好在控制器里单独用一个对象来维护这组数据
控制器里给需要绑定的值初始化像这样:
$scope.table = {
isShow: false
id: '',
currentUser: '',
.......
}
自定义指令里的点击事件:
$scope.clickme = () => {
$scope.table.isShow = true //table, ng-show
$scope.table.id = $scope.data.id
$scope.table.currentUser = $scope.data.currentUser
.........
}
当然可以不用单独写一个指令,但是这样页面逻辑很多了以后,controller会变得难以维护
同问 我现在无奈的做法是把他们写在一个页面里 用ng-show来控制
我懂你的意思了
我觉得你这种情况应该使用service或者factory来令不同controller共享数据
例子:
angular.module('app').factory('sharedItems', function(){
var editItemIndex = 0;//待需要编辑的数据传入
var itmes = [
{
name: '123',
floot: '1',
manager: 'Peter'
},
{
name: '123',
floot: '1',
manager: 'Peter'
}
];
sharedItems.putEditItemIndex = function (index) {
editItemIndex = index
}
sharedItems.getEditItemIndex = function () {
return editItemIndex
}
sharedItems.updateManager = function(index, newManager){
items[index].manager = newManager;
};
sharedItems.getItems = fucntion () {
return items
}
return sharedItems;
});
然后表格和编辑的地方分别为两个单独的controller:
<div ng-app="app">
<h1>Services</h1>
<div ng-controller="ListCtrl">
<!--这里就简单模仿你的表格-->
<div> ng-repeat="item in items">{{ items.name }}, {{ items.floor }}, {{ items.manager }}
<button ng-click="edit($index)">编辑</button>
</div>
</div>
<div ng-controller="EditCtrl">
<!--这里是编辑的区域-->
<select ng-model="currentManager">
<option ng-repeat="manager in allManagers">{{manager}}</option>
</select>
<button ng-click="update()">提交修改</button>
</div>
</div>
//表格的那个controller
angular.module('app').controller('ListCtrl', function (sharedItems){
//。。。。。。。。。。。。。。。。。。。。。。注意这里上面的sharedItems factory注入
$scope.items = sharedItems.getItems(); //获取factory里的共享数据
$scope.edit = function (index) {
sharedItems.putEditItemIndex(index)
//用你的方法打开编辑的东西
}
});
//编辑用的那个controller
angular.module('app').controller('EditCtrl', function (sharedItems){
//。。。。。。。。。。。。。。。。。。。。。。注意这里上面的sharedItems factory注入
$scope.items = sharedItems.getItems();
$scope.editItemIndex = sharedItems.getEditItemIndex();
$scope.currentManager = items[editItemIndex].manager
$scope.allManagers = //用你的方法获取你数据库里的所有楼长
$scope.update(){
//如果select换了新的楼长,currentManager就会更新
sharedItems.updateManager($scope.editItemIndex, currentManager)
}
//然后关闭这个编辑框,表格里的数据应该就更新了
});