代码之家 › 专栏 › 技术社区 › MDT

Angular JS:ng重复与动态ng模型

angular-ngmodel angularjs-ng-repeat angularjs javascript

MDT · 技术社区 · 10 年前

我有这个工作一段重复多次的代码,因此对于ng重复循环非常有用。例如,我的代码的两个实例如下。

    <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重复循环,但到目前为止没有成功。这是我给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模型变量中,以及ng点击和ng显示中的$index中。不确定是否能做到这一点,非常感谢任何帮助,谢谢!

更新: 感谢您的所有回答,使用

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

工作很棒!

仍在努力使用showParam和resetSearchField函数,这些函数尚未使用$index正常工作。这是我的代码。

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

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

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

4 回复 | 直到 10 年前

Cem Özer 10 年前

当您将ng模型绑定到 searchParameters.userName 和 searchParameters.userMail 首先,必须使用 searchParameters[param.param] 对于ng重复中的ng模型。也正如其他人所说,你不需要使用$index,你得到的对象是 param 在ng重复范围内。

<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

Rajamohan Anguchamy 10 年前

<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显示中显示单个值,并在其中单击使用。或其他明智的用途。

<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

这将传递整个对象列表集。

Foo L 10 年前

不需要在内部插入角度变量 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

Puce 10 年前

正如@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/