在ng-repeat中使用范围变量

时间:2021-01-31 19:33:48

I want to use a $scope variable within the ng-repeat attribut, like so :

我想在ng-repeat attribut中使用$ scope变量,如下所示:

<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in {{usersOpinion}}">

But it doesnt seem to work, {{usersOpinion}} remains non-interpreted... How could I manage to make it work?

但它似乎没有用,{{usersOpinion}}仍然没有解释......我怎么能设法让它工作?

The Idea is to dynamically change {{usersOpinion}} when clicking on button.

想法是在点击按钮时动态更改{{usersOpinion}}。

Thanks

4 个解决方案

#1


1  

Instead of ng-repeat="userOpinion in {{usersOpinion}}" ,change it to ng-repeat="userOpinion in usersOpinions.

而不是ng-repeat =“userOpinion in {{usersOpinion}}”,将其更改为ng-repeat =“userOpinions中的userOpinion”。

You should use like

你应该使用喜欢

<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinions">{{userOpinion}}</div>

#2


0  

It should be enough to remove the curly brackets. The ng-repeat is interpreted as code.

它应该足以删除大括号。 ng-repeat被解释为代码。

<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinion">

The curly brackets tells angular that it should transform the variable into a string before outputting it.

大括号告诉angular它应该在输出之前将变量转换为字符串。

#3


0  

If you want to change it dynamically you need to add ng-click to div tag, something like this

如果你想动态地改变它,你需要添加ng-click到div标签,就像这样

  <div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinion" ng-click="changeOpinion($index)">
    {{userOpinion}}
  </div>

and add function to scope

并将功能添加到范围

$scope.changeOpinion = function (index) {
    $scope.usersOpinion[index] += '1';
}

no you can do whaterver you want with value of that opinion, here is the whole code with both simple array of opinions and objects http://jsfiddle.net/Lvc0u55v/9513/

不,你可以用这个意见的价值来做你想要的,这里是整个代码,包含简单的意见和对象http://jsfiddle.net/Lvc0u55v/9513/

#4


0  

if I'm understand your question, you can try this

如果我理解你的问题,你可以试试这个

var autoDrops = angular.module('autoDrops', []);
autoDrops.controller('DropsController', function($scope) {
  $scope.usersOpinion = [];

  $scope.datas = [{
    "name": "item01"
  }, {
    "name": "item02"
  }, {
    "name": "item03"
  }, {
    "name": "item04"
  }, {
    "name": "item05"
  }, {
    "name": "item06"
  }];
  $scope.datas1 = [{
    "name": "item11"
  }, {
    "name": "item12"
  }, {
    "name": "item13"
  }, {
    "name": "item14"
  }, {
    "name": "item15"
  }, {
    "name": "item16"
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="autoDrops" ng-controller="DropsController">
  <button ng-click="usersOpinion = datas">
    data
  </button>
  <button ng-click="usersOpinion = datas1">
    datas1
  </button>
  <div>
    <div ng-repeat="elem in usersOpinion">
      {{elem}}
    </div>
  </div>
</div>

#1


1  

Instead of ng-repeat="userOpinion in {{usersOpinion}}" ,change it to ng-repeat="userOpinion in usersOpinions.

而不是ng-repeat =“userOpinion in {{usersOpinion}}”,将其更改为ng-repeat =“userOpinions中的userOpinion”。

You should use like

你应该使用喜欢

<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinions">{{userOpinion}}</div>

#2


0  

It should be enough to remove the curly brackets. The ng-repeat is interpreted as code.

它应该足以删除大括号。 ng-repeat被解释为代码。

<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinion">

The curly brackets tells angular that it should transform the variable into a string before outputting it.

大括号告诉angular它应该在输出之前将变量转换为字符串。

#3


0  

If you want to change it dynamically you need to add ng-click to div tag, something like this

如果你想动态地改变它,你需要添加ng-click到div标签,就像这样

  <div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinion" ng-click="changeOpinion($index)">
    {{userOpinion}}
  </div>

and add function to scope

并将功能添加到范围

$scope.changeOpinion = function (index) {
    $scope.usersOpinion[index] += '1';
}

no you can do whaterver you want with value of that opinion, here is the whole code with both simple array of opinions and objects http://jsfiddle.net/Lvc0u55v/9513/

不,你可以用这个意见的价值来做你想要的,这里是整个代码,包含简单的意见和对象http://jsfiddle.net/Lvc0u55v/9513/

#4


0  

if I'm understand your question, you can try this

如果我理解你的问题,你可以试试这个

var autoDrops = angular.module('autoDrops', []);
autoDrops.controller('DropsController', function($scope) {
  $scope.usersOpinion = [];

  $scope.datas = [{
    "name": "item01"
  }, {
    "name": "item02"
  }, {
    "name": "item03"
  }, {
    "name": "item04"
  }, {
    "name": "item05"
  }, {
    "name": "item06"
  }];
  $scope.datas1 = [{
    "name": "item11"
  }, {
    "name": "item12"
  }, {
    "name": "item13"
  }, {
    "name": "item14"
  }, {
    "name": "item15"
  }, {
    "name": "item16"
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="autoDrops" ng-controller="DropsController">
  <button ng-click="usersOpinion = datas">
    data
  </button>
  <button ng-click="usersOpinion = datas1">
    datas1
  </button>
  <div>
    <div ng-repeat="elem in usersOpinion">
      {{elem}}
    </div>
  </div>
</div>

相关文章