Angular JS：带有动态 ng-model 的 ng-repeat答案

【问题标题】：Angular JS: ng-repeat with dynamic ng-modelAngular JS：带有动态 ng-model 的 ng-repeat
【发布时间】：2014-10-30 01:49:14
【问题描述】：

我有一段重复多次的工作代码，因此非常适合 ng-repeat 循环。例如，我的代码的两个实例如下。

    <div>
        <input type="text" ng-model="searchParamaters.userName" placeholder="User Name"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[0].param)" ng-show="showParam(filterParamDisplay[0].param)"></i>
    </div>
    <div>
        <input type="text" ng-model="searchParamaters.userEmail" placeholder="User Email"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[1].param)" ng-show="showParam(filterParamDisplay[1].param)"></i>
    </div>

这是 Javascript 中的 filterParamDisplay 数组：

    $scope.filterParamDisplay = [
        {param: 'userName', displayName: 'User Name'},
        {param: 'userEmail', displayName: 'User Email'}
    ];

我一直试图在 ng-repeat 循环中这样做，但到目前为止没有成功。这是我在atm上编码的。

    <div ng-repeat="param in filterParamDisplay">
        <input type="text" ng-model="searchParams[{{param}}]" placeholder="{{param.displayName}}"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"></i>
    </div>

问题出在上面的 ng-model 变量中，以及 ng-click 和 ng-show 中的 $index 中。不知道这是否可以完成，非常感谢任何帮助，谢谢！

更新：感谢所有的答案，使用

     <div ng-repeat="p in filterParamDisplay">
...
   ng-model="searchParams[p]"

效果很好！

仍然在使用 $index 无法正常工作的 showParam 和 resetSearchField 函数上苦苦挣扎。这是我的代码。

    $scope.searchParams = $state.current.data.defaultSearchParams;

    $scope.resetSearchField = function (searchParam) {
        $scope.searchParams[searchParam] = '';
    };

    $scope.showParam = function (param) {
        return angular.isDefined($scope.searchParams[param]);
    };

【问题讨论】：

你不需要做showParam(filterParamDisplay[$index])。 ShowParam(param) 本身应该可以工作，因为 param 是由 ngRepeat 设置的
searchParams 字段肯定有问题。你能分享一下你的js，其中包含searchParams和resetSearchField。

标签： javascript angularjs angularjs-ng-repeat angular-ngmodel

【解决方案1】：

您不需要在 ng-* 指令中插入角度变量。

试试：

HTML：

<div ng-repeat="p in filterParamDisplay">
    <input type="text" ng-model="searchParams[p]" placeholder="{{p.displayName}}"/>
    <i ng-click="printme(p.param)">click</i>
</div>

控制器：

$scope.filterParamDisplay = [
    {param: 'userName', displayName: 'User Name'},
    {param: 'userEmail', displayName: 'User Email'}
];
$scope.printme = function(v) {
    console.log(v);
};

jsfiddle

【讨论】：

【解决方案2】：

正如@aarosil 所说，您不需要使用$index。我写了一个小jsfiddle，我不知道你showParam背后的逻辑所以我嘲笑它。

查看：

<div ng-controller="Ctrl">
  <div ng-repeat="param in filterParamDisplay">
    <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}"/>
    <i class="fa fa-times" ng-click="resetSearchField(param)" ng-show="showParam(param)"></i>
  </div>
</div>

和控制器：

$scope.searchParams = {};  
$scope.filterParamDisplay = [
    {param: 'userName', displayName: 'User Name'},
    {param: 'userEmail', displayName: 'User Email'}
];
$scope.resetSearchField = function(param){
  $scope.searchParams[param.param] = "";
};
$scope.showParam = function(param){ ... }

http://jsfiddle.net/29bh7dxe/1/

【讨论】：

【解决方案3】：

<div ng-app="dynamicAPP">
    <div ng-controller="dynamicController">
        <div ng-repeat="param in filterParamDisplay">
            <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}" /> <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"></i>
        </div>{{searchParams}}</div>
</div>

Jsfiddler link this one for get a single object like 'username' or 'email'

您希望在 ng-show 和 ng-click 中使用单个值，然后使用上面的值。或其他明智的使用下面的一个。

<div ng-app="dynamicAPP">
    <div ng-controller="dynamicController">
        <div ng-repeat="param in filterParamDisplay">
            <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}" /> <i class="fa fa-times" ng-click="resetSearchField(.param)" ng-show="showParam(param)"></i>
        </div>{{searchParams}}</div>
</div>

Jsfiddler link this one is get whole object based on the control

这将传递整个对象列表。

【讨论】：

【解决方案4】：

在第一个示例中，当您将 ng-model 绑定到 searchParameters.userName 和 searchParameters.userMail 时，您必须在 ng-repeat 中将 searchParameters[param.param] 用于 ng-model。也像其他人说的那样，您不需要使用 $index，您的对象在 ng-repeat 范围内为 param。

<div ng-repeat="param in filterParamDisplay">
    <input type="text" ng-model="searchParameters[param.param]" placeholder="{{param.displayName}}"/>
    <i class="fa fa-times" ng-click="resetSearchField(param.param)" ng-show="showParam(param.param)"></i>
</div>

这里工作FIDDLE

【讨论】：