Question

我们说我有一个对象：

$scope.Golovkin = {
    id:12,
    Like:0,
    Dislike:0,
    url:"https://twitter.com/GGGBoxing"
};

在视图中我有一个按钮：

<input type="button" value="Like" ng-click="incrementLikes(Golovkin)" />

如何将属性名称value替换为按钮的$scope.Golovkin.Like作为字符串？

Answer 1

<input type="button" ng-model="Golovkin.Like" ng-click="incrementLikes(Golovkin)" />

Answer 2

你需要这个名字＆＃34;喜欢＆＃34;在按钮上。这是对象的第二个属性。您需要一个函数，通过该函数可以通过索引返回属性名称。

 $scope.getKeyName = function(obj, idx) {
            return Object.keys(obj)[idx];
    }

现在使用它来获取视图上的名称

<input type="button" value={{getKeyName(Golovkin, 1)}} ng-click="incrementLikes(Golovkin)" />

Answer 3

您可以使用<button>，例如： <button ng-click="incrementCount()">{{Golovkin.Like}}</button>

以下是计数编号的示例：jsFiddle example。

修改

初始化控制器时，可以将属性的名称保存在数组中：

$scope.buttonName = Object.keys($scope.Golovkin);

并将该名称显示为：

<button ng-click="incrementCount()">{{buttonName[1]}}</button>

请参阅此jsFiddle。

Answer 4

您可以使用方法Object.getOwnPropertyNames(objName)。

这是一个代码片段：

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope) {
 $scope.Golovkin = {
    id: 12,
    Like: 0,
    Dislike: 0,
    url: "https://twitter.com/GGGBoxing"
  };

  $scope.getProperty = function(property) {
    return Object.getOwnPropertyNames($scope.Golovkin).find(x => x == property);
  }

  $scope.incrementLikes = function(Golovkin) {
    Golovkin.Like++;
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
</head>

<body ng-controller="mainCtrl">
  <input type="button" value="{{ getProperty('Like') }}" ng-click="incrementLikes(Golovkin)">
  <!-- <button ng-click="incrementLikes(Golovkin)"><span ng-bind="getProperty('Like')"></span></button> -->
</body>

</html>

在标记中获取AngularJS对象属性名称

4 个答案: