javascript - angular JS 关于下拉框编辑回显的问题

Question

我点击编辑之后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;
   }

我的前端页面是这样的

<p class="form-group">
                <label class="col-sm-3 control-label no-padding-right">楼长：</label>
                <p 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>
                </p>
</p>

请问各位我怎么点编辑的时候让楼长这个人回显出来?

Answer 1

同问 我现在无奈的做法是把他们写在一个页面里 用ng-show来控制

Answer 2

我懂你的意思了
我觉得你这种情况应该使用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：

<p ng-app="app">
  <h1>Services</h1>

  <p ng-controller="ListCtrl">
    <!--这里就简单模仿你的表格-->
    <p> ng-repeat="item in items">{{ items.name }}, {{ items.floor }}, {{ items.manager }}
    <button ng-click="edit($index)">编辑</button>
    </p>
    
  </p>

  <p ng-controller="EditCtrl">
    <!--这里是编辑的区域-->
     <select ng-model="currentManager">
         <option ng-repeat="manager in allManagers">{{manager}}</option>
      </select>
    
    <button ng-click="update()">提交修改</button>
  </p>
</p>

//表格的那个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)

  }
//然后关闭这个编辑框，表格里的数据应该就更新了
   
});

Answer 3

写个例子，不知道是不是你想要的

<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;                
            }
        }        
    }

Answer 4

控制器里给$scope.currentUser赋值
主面板可以这样写<p ng-repeat = "data in dataList" mc-directive></p>
面板上的各种操作写在自定义指令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会变得难以维护