angularjs - How to pass dynamic values in "ng-if"?
问题描述
I have a problem with passing dynamic values in "ng-if". If I pass a static value then it's working, but when I pass dynamic values by concatenation of two variables it's not working. I tried with below code:
<ul class="list cart">
<li class="cart_item"
ng-repeat="product in orderInfo.products track by product.product_id"
data-id="\{{product.product_id}}" id="items_list_{{product_id}}">
<button
ng-click="removeItem(product.product_id)"
// If I pass a static value like "removed_31460" then its working.
ng-if="removed_31460 == 'added'"
// If tried to pass a dynamic value like below I am getting error as token not accepted.
**ng-if="removed_+product.product_id == 'added'"**
data-product-id="{{item_id}}"
class="remove" data-id="\{{ product.product_id }}">
Remove
</button>
</li>
</ul>
Note: "removed_31460" is defined in my app.js
file.
Here is the runnable code:
function TodoCtrl($scope) {
$scope.products = [
{product_id:'123'},
{product_id:'234'},
];
let removed_id = '';
for (let i = 0; i < $scope.products.length; i++) {
removed_id = 'removed_'+ $scope.products[i].product_id;
$scope[removed_id] = 'added';
}
$scope.removeItem = function(product_id) {
alert('in ' + product_id);
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<ul class="list cart">
<li class="cart_item" ng-repeat="product in products" data-id="\{{product.product_id}}" id="items_list_{{product_id}}">
<button
ng-click="removeItem(product.product_id)"
// If I pass a static value like "removed_31460" then its working.
ng-if="removed_23445 == 'added'"
// If tried to pass a dynamic value like below I am getting error as token not accepted.
**ng-if="removed_+product.product_id == 'added'"**
data-product-id="{{item_id}}"
class="remove" data-id="\{{ product.product_id }}">
Remove
</button>
</li>
</ul>
</div>
</div>
解决方案
Use:
ng-if="this['removed_' + product.product_id] == 'added'"
The identifier this
can be used to refer to $scope
.
For more information, see
The code can be changed to create a hash named statusById
:
function TodoCtrl($scope) {
$scope.products = [
{product_id:'123'},
{product_id:'234'},
];
$scope.statusById = {};
$scope.products.forEach(p => $scope.statusById[p.product_id] = 'added');
$scope.removeItem = function(index) {
$scope.products.splice(index,1);
$scope.statusById[$scope.products[index].productId] = 'removed';
};
}
Then the template can use $index
:
<li ng-repeat="product in products" id="items_list_{{product_id}}">
<button ng-click="removeItem($index)"
ng-if="statusById[product.product_id] == 'added'"
>
Remove
</button>
</li>
For more information, see
推荐阅读
- php - 计算活动的缓存会话 Laravel。(需要建议)
- r - 在滞后的数据框中创建新列的问题
- java - Peg 纸牌解决方案更改目的地
- c# - 使用数据保护 API 作为 JWT 的密钥管理器
- wechat - wx.querySelector().select.node() 方法的问题
- memory-management - 错误:AddressSanitizer 未能解除分配
- amazon-ses - Amazon SES 错误消息:缺少 '"' 是什么意思?
- javascript - RTK 查询正在循环结果,但未提供预期内容
- javascript - socket.io 客户端未在套接字 io 服务器上触发事件
- python - 唯一约束失败:django 中的 post_author.href