如何为ng-model定义赋值

时间:2014-01-28 12:14:43

标签: angularjs angularjs-directive angularjs-scope angular-ui angular-ui-bootstrap

我在我的应用程序中使用ui-bootstrap进行typeahead。

<input type="text" ng-model="newItem.id" class="form-control">
<pre>Model: {{customSelected | json}}</pre>
<input type="text" ng-model="customSelected" typeahead="asset as asset.asset_name for asset in assets | filter:{asset_name:$viewValue}" class="form-control">

当我选择自动填充值时,我可以看到我的对象已打印出来。但问题是我使用newItem对象设置表单值并传递给$http请求,那么如何将customSelected.id设置为newItem.id

当我使用这样的东西时会出错,

<input type="text" ng-model="newItem.id=customSelected.id" class="form-control">

Demo

2 个答案:

答案 0 :(得分:0)

如果您要将选定的asset id分配给newItem.id

<input type="text" ng-model="newItem.id" typeahead="asset.id as asset.asset_name for asset in assets | filter:{asset_name:$viewValue}" class="form-control">

更新(FIDDLE

查看:

<div ng-app="App">
  <div ng-controller="ctrl">
    <input type="text" ng-model="newItem.id" class="form-control" />

    <input 
      type="text" 
      ng-model="customSelected" 
      typeahead="asset as asset.asset_name for asset in assets | filter:{asset_name:$viewValue}" 
      class="form-control" />

  </div>
</div>

控制:

function ctrl($scope){

  $scope.newItem = {};

  $scope.assets = [
    {
      "id":"1",
      "asset_reg_no":"AST1",
      "asset_name":"Omega Shopping Complex"
    },
    {
      "id":"2",
      "asset_reg_no":"AST2",
      "asset_name":"Keedam Chicken Farm"
    }
  ];

  $scope.$watch('customSelected', function(asset, oldAsset){
    if(!asset && !oldAsset){
      return;
    }
    if(oldAsset && !asset){
      delete $scope.newItem.id;
      delete $scope.newItem.asset_reg_no;
      return;
    }
    $scope.newItem.id = asset.id;
    $scope.newItem.asset_reg_no = asset.asset_reg_no;
  });

}

答案 1 :(得分:0)

如果我理解你,那么demo就是你想要的

    function ctrl($scope){
        $scope.assets = [{"id":"1","asset_reg_no":"AST1","asset_name":"Omega Shopping Complex","asset_type_id":"2","description":"Shopping Complex in Calicut","created_on":"2014-01-28 16:03:23","asset_type_name":"Building"},{"id":"2","asset_reg_no":"AST2","asset_name":"Keedam Chicken Farm","asset_type_id":"2","description":"Chicken farm in Valivida","created_on":"2014-01-28 16:04:06","asset_type_name":"Building"}];

    $scope.newItem = {};
    $scope.$watch('customSelected', function(asset, oldAsset){
    $scope.newItem.id = asset.id;
    $scope.newItem.text = asset.asset_name;
      });

    }