Question

我已经尝试谷歌（很多）找到答案，但我对正确的关键字感到很遗憾，所以请原谅我为这篇文章提供了正确的尝试标题...

请参阅this fiddle以更清楚地了解我正在尝试做的事情。

我的问题是：如果'firstname' - ，'lastname' - 字段（或两者）发生变化，我可以更新select-option中fullname-filter的显示吗？

好吧 - 好吧：我需要更精确：我知道我的方法并没有完全削减它（还）;-)，但也许有人喜欢分享，或指向我的方向？

提前谢谢，第

HTML：

<label for="userPick">User: </label>
<select name="userPick" ng-selected="input.user.id" ng-model="input.user" ng-options="oUser as ( oUser | fullnamefilter ) for oUser in output.user track by oUser.id">
    <option value="">Select User</option>
</select>

<div ng-show="control.showUser">
    <h4>id: {{input.user.id}}</h4>  
        <label for="userShort">Short: </label>
        <input name="userShort" type="text" value="{{input.user.short}}" ng-model="input.user.short" /> 
                            <br/>
        <label for="user1stName">First Name: </label>
        <input name="user1stName" type="text" value="{{input.user.firstname}}" ng-model="input.user.firstname" />
                            <br/>
        <label for="userLastName">Last Name: </label>
        <input name="userLastName" type="text" value="{{input.user.lastname}}" ng-model="input.user.lastname" />

                            <br/>                                 
</div>

过滤

var App = angular.module( 'io_module', [] ) ;

App.filter('fullnamefilter', function(){
    return function(x) {
        return x.firstname + " " + x.lastname ;
    }
}) ;

控制器

中的

$scope.output = {
    user: [{
                id:1,
                short:"bb",
                vorname:"billie",
                lastname:"bobb"
            },
            {
                id:2,
                short:"dc",
                firstname:"dweezil",
                name:"cummings"
            }],
    ...
} ;


$scope.input = {
    user: {
                id:null,
                short:null,
                firstname:null,
                lastname:null
            },
    ...
} ;

Answer 1

您在$track by中使用select as ng-options。

正如documentation所说：

但这不起作用： $ scope.selected = $ scope.items [0] .subItem; 在这两个示例中，track by expression成功应用于items数组中的每个项目。由于已在控制器中以编程方式设置所选选项，因此表达式跟踪也将应用于ngModel值。在第一个示例中，ngModel值为items [0]，track by expression计算为items [0] .id，没有任何问题。在第二个示例中，ngModel值是items [0] .subItem，track by expression计算为items [0] .subItem.id（未定义）。因此，模型值不与任何值匹配，并且显示为没有选定值。

jsfiddle上的实例。

var App = angular.module( 'io_module', [] ) ;

App.filter('userfilter', function(){
    return function(x) {
        return x.firstname + " " + x.lastname ;
    }
}) ;

App.controller( 'ioController', [ '$scope', '$log', function( $scope, $log ){    
    $scope.control = {
        showUser:true
    } ;
  $scope.output = {
      user: [{
                  id:1,
                  short:"bb",
                  firstname:"billie",
                  lastname:"bobb"
              },
              {
                  id:2,
                  short:"dc",
                  firstname:"dweezil",
                  lastname:"cummings"
              }]
  } ;


  $scope.input = {
      user: {
                  id:null,
                  short:null,
                  firstname:null,
                  lastname:null
              }
  } ;
}]) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="io_module">

 <div ng-controller="ioController"> 
   <label for="userPick">User: </label>
   <select name="userPick" ng-selected="input.user.id" ng-model="input.user" ng-options="oUser as ( oUser | userfilter ) for oUser in output.user">
      <option value="">Select User</option>
  </select>

  <div ng-show="control.showUser">
      <h4>id: {{input.user.id}}</h4>  
          <label for="userShort">Short: </label>
          <input name="userShort" type="text" value="{{input.user.short}}" ng-model="input.user.short" /> 
                              <br/>
          <label for="user1stName">First Name: </label>
          <input name="user1stName" type="text" value="{{input.user.firstname}}" ng-model="input.user.firstname" />
                              <br/>
          <label for="userLastName">Last Name: </label>
          <input name="userLastName" type="text" value="{{input.user.lastname}}" ng-model="input.user.lastname" />

                              <br/>                                 
  </div>
 </div>
 </div>

Answer 2

使用ngKeyup捕获模型更改值

 <label for="user1stName">First Name: </label>
          <input name="user1stName" type="text" value="{{input.user.firstname}}" ng-model="input.user.firstname" ng-keyup="keyupFuncton(input)"/>
                              <br/>
          <label for="userLastName">Last Name: </label>
          <input name="userLastName" type="text" value="{{input.user.lastname}}" ng-model="input.user.lastname" ng-keyup="keyupFuncton(input)" />

<强>控制器

$scope.keyupFuncton = function(newData) {        
  angular.forEach($scope.output.user, function(out, index){       
      if (out.id == newData.user.id) {            
         $scope.output.user[index] = newData.user;  

      }
  })
  };

Edited your fiddle

Answer 3

我没有足够的声誉来评论，所以希望这会让它变得更容易，而不会失去你想要的功能....

您可以在输入标记上使用ngChange指令。这将在用户键入或删除字符时调用您传递的函数。

<label>First Name</label>
<input type="text"  
       ng-model="userInput.firstname" 
       ng-change="adjustedFilterSearch()"/>

<label>Last Name</label>
<input type="text"  
       ng-model="userInput.lastname" 
       ng-change="adjustedFilterSearch()"/>
{{ searchResults | json }}

这将调用控制器中的函数，您可以使用它来包装过滤器。过滤器至少需要两个参数，您正在搜索的数据和一些标准。幸运的是，你只需要从ngModel传递userInput对象，而angular就会超出属性。

$scope.searchResults;
$scope.adjustedFilterSearch = function() {
    $scope.searchResults = $filter('filter')($scope.users, $scope.userInput)
};

我建议您删除所有额外的属性和指令，直到您首先获得基本功能。此外，控制器中的对象看起来比它们需要的更复杂。为什么不从以下开始：

$scope.users = [
    {firstname: "Clark", lastname: "Kent"},
    {firstname: "Bruce", lastname: "Wayne"}
};

这将更容易迭代或过滤。一旦你可以构思和实现它，那么你可以用嵌套对象构建你的对象，如果它甚至是必要的。这里是the simplified fiddle。

ng-option选择额外的数据绑定？

3 个答案: