Question

我正在从JSON文件导入标签/输入信息，以便尝试减少HTML的大小并使其在将来更容易修改。部分内容意味着我正在为ngModel使用字符串输入。

麻烦在于双向绑定没有按预期发挥作用。我已经看到一些线程，其中指令用于帮助这一点，但我不能让它工作。

小提琴示例：http://jsfiddle.net/kelh/LLuwka8h/

修改：小提琴示例已更新：http://jsfiddle.net/kelh/6vccr206/

将select标签从“first”更改为“second”时，修改第二个文本框（字符串输入）将不会绑定到num2的正确值，而是修改num1。

JS代码：

var app = angular.module('myApp',[]);

app.controller('MyCtrl', ['$scope',  function($scope) 
{
        $scope.calc = {num1:100, num2:350};
    $scope.num1 = 100;
    $scope.num2 = 350;

    $scope.labels = {
        selected: null,
      options: [
        {id: 0, name: 'first'},
        {id: 1, name: 'second'}
      ]
    };
    $scope.labels.selected = $scope.labels.options[0];

    $scope.itemsPlaceholder = [{"label":"First One", "model":"calc.num1"}, {"label":"Second one", "model":"calc.num2"}];

    $scope.items = [$scope.itemsPlaceholder[0]];

    $scope.change = function()
    {
        var id = $scope.labels.selected.id;
        $scope.items = [$scope.itemsPlaceholder[id]];
    }
}]);

app.directive('ngBindModel',function($compile){
    return {             
        link: function(scope,element,attr){

            element[0].removeAttribute('ng-bind-model');
            element[0].setAttribute('ng-model',scope.$eval(attr.ngBindModel));
            $compile(element[0])(scope);
        }
    };
});

app.directive('stringToNumber', function($compile) {
    return {
        require: 'ngModel',           
        link: function(scope, element, attrs, ngModel) {
            /*
            ngModel.$parsers.push(function(value) {
                return '' + value;
            });
            //*/
            ngModel.$formatters.push(function(value) {
                return parseFloat(value);
            });
        }
    };
});

HTML：

<div ng-app="myApp" ng-controller="MyCtrl">

  num1: {{calc.num1}} <br> num2: {{calc.num2}}

  <br><BR>

  {{labels.selected.options.id}}
  <label>Select: </label>
  <select ng-model="labels.selected" ng-options="options.name for options in labels.options track by options.id" ng-change="change();">
  </select>
  <BR><BR><BR>

  <i> "normal" usage of ngModel -- </i>
  <div ng-show="labels.selected.id == 0">
    <label>{{items[0].label}}  (model is: num1) </label><br>
    <input type="number" name="inp{{$index}}" ng-model="calc.num1"/>
  </div>

  <div ng-show="labels.selected.id == 1">
    <label>{{items[1].label}}  (model is: num2) </label><br>
    <input type="number" name="inp{{$index}}" ng-model="calc.num2"/>
  </div>

  <br> <i> string input for ngModel -- </i>
  <div ng-repeat="item in items track by $index">
    <label>{{item.label}}  (model is: {{item.model}}) </label><br>
    <input type="number" name="inp{{$index}}"
      string-to-number ng-model="this[item.model]" ng-bind-model="item.model" />
  </div>

</div>

Answer 1

我通过使用括号表示来访问JS对象属性。我的最终目标是将其用于嵌套属性。

JS：

var app = angular.module('myApp',[]);

app.controller('MyCtrl', ['$scope',  function($scope) 
{
        $scope.calc = {num1:100, num2:350};
    $scope.num1 = 100;
    $scope.num2 = 350;

    $scope.labels = {
        selected: null,
      options: [
        {id: 0, name: 'first'},
        {id: 1, name: 'second'}
      ]
    };
    $scope.labels.selected = $scope.labels.options[0];

    $scope.itemsPlaceholder = [{"label":"First One", "model":"num1"}, {"label":"Second one", "model":"num2"}];

    $scope.items = [$scope.itemsPlaceholder[0]];

    $scope.change = function()
    {
        var id = $scope.labels.selected.id;
        $scope.items = [$scope.itemsPlaceholder[id]];
    }
}]);

app.directive('ngBindModel',function($compile){
    return {             
        link: function(scope,element,attr){

            element[0].removeAttribute('ng-bind-model');
            element[0].setAttribute('ng-model',scope.$eval(attr.ngBindModel));
            $compile(element[0])(scope);
        }
    };
});

app.directive('stringToNumber', function($compile) {
    return {
        require: 'ngModel',           
        link: function(scope, element, attrs, ngModel) {
            /*
            ngModel.$parsers.push(function(value) {
                return '' + value;
            });
            //*/
            ngModel.$formatters.push(function(value) {
                return parseFloat(value);
            });
        }
    };
});

HTML：

<div ng-app="myApp" ng-controller="MyCtrl">

  num1: {{calc.num1}} <br> num2: {{calc.num2}}

  <br><BR>

  {{labels.selected.options.id}}
  <label>Select: </label>
  <select ng-model="labels.selected" ng-options="options.name for options in labels.options track by options.id" ng-change="change();">
  </select>
  <BR><BR><BR>

  <i> "normal" usage of ngModel -- </i>
  <div ng-show="labels.selected.id == 0">
    <label>{{items[0].label}}  (model is: num1) </label><br>
    <input type="number" name="inp{{$index}}" ng-model="calc.num1"/>
  </div>

  <div ng-show="labels.selected.id == 1">
    <label>{{items[1].label}}  (model is: num2) </label><br>
    <input type="number" name="inp{{$index}}" ng-model="calc.num2"/>
  </div>

  <br> <i> string input for ngModel -- </i>
  <div ng-repeat="item in items track by $index">
    <label>{{item.label}}  (model is: {{item.model}}) </label><br>
    <input type="number" name="inp{{$index}}"
       ng-model="calc[item.model]" />
  </div>

</div>

ngModel的AngularJS字符串输入

1 个答案: