将数据解析为 ng-model 不起作用

Question

我正在尝试将数据解析为 ng-model，但出现错误。

html:

<div class="process-checkbox-holder" ng-repeat="time in data">
            <div class="checkbox-title">{{ time.id }}</div>
            <div class="process-checkbox">
                <input type="checkbox" ng-model="{{ time.model}}" value="None" id="process-checkbox" name="check">
                <label for="process-checkbox"></label>
            </div>
        </div>

数据：

$scope.data = [
            {"id":"00", "model": "user.hourzero"},
            {"id":"01", "model": "user.hourone"},
            {"id":"03", "model": "user.hourtwo"},
            {"id":"04","model": "user.hourthree"},
            {"id":"05", "model": "user.hourfour"},
            {"id":"06", "model": "user.hourfive"},
            {"id":"07", "model": "user.hoursix"},
            {"id":"08", "model": "user.hourseven"},
            {"id":"09", "model": "user.houreight"},
            {"id":"10", "model": "user.hournine"},
            {"id":"11", "model": "user.hourten"},
            {"id":"12", "model": "user.houreleven"},
            {"id":"13", "model": "user.hourthirteen"},
            {"id":"14", "model": "user.hourfourteen"},
            {"id":"15", "model": "user.hourfifteen"},
            {"id":"16", "model": "user.hoursixteen"},
            {"id":"17", "model": "user.hourseventeen"},
            {"id":"18", "model": "user.houreighteen"},
            {"id":"19", "model": "user.hournineteen"},
            {"id":"20", "model": "user.hourtwenty"},
            {"id":"21", "model": "user.hourtwentyone"},
            {"id":"22", "model": "user.hourtwentytwo"},
            {"id":"23", "model": "user.hourtwentythree"}

        ];

我收到这个错误：

 Error: [$parse:syntax] Syntax Error: Token 'time.model' is unexpected, expecting [:] at column 5 of the expression [{{  time.model}}] starting at [time.model}}].
http://errors.angularjs.org/1.2.16/$parse/syntax?p0=time.model&p1=is%20unex…cting%20%5B%3A%5D&p2=5&p3=%7B%7B%20%20time.model%7D%7D&p4=time.model%7D%7D
    at angular.js:78
    at Parser.throwError (angular.js:10266)
    at Parser.consume (angular.js:10303)
    at Parser.object (angular.js:10616)
    at Parser.primary (angular.js:10234)
    at Parser.unary (angular.js:10492)
    at Parser.multiplicative (angular.js:10475)
    at Parser.additive (angular.js:10466)
    at Parser.relational (angular.js:10457)
    at Parser.equality (angular.js:10448)

任何人都可以帮助我我做错了什么吗？无法将数据解析为 ng-model 吗？非常感谢

PLNKR

Answer 1

这是一种使用指令解析模型字符串的方法，方法是使用 $compile

编译模板

HTML

<div class="process-checkbox-holder" ng-repeat="time in data">
    <span class="checkbox-title">{{ time.id }}</span>
    <check-box model="time.model" user='user'></check-box>
  </div>

JS

app.directive('checkBox', function($compile){
    return {           
        restrict:'E',       
        scope:{model : '=', user:'='},
        link:function(scope,elem,attrs){             
           var template ='<input  type="checkbox" ng-model="'+scope.model+'">';
           elem.replaceWith($compile(template)(scope));
       }
    }
});

这需要使用隔离范围，因此您必须在控制器中声明 user 才能正常工作。如果您还需要添加验证，这可能不是最佳方法，但现在它涵盖了所显示的内容。

我现在尽量保持简单。

DEMO

将数据解析为 ng-model 不起作用

Parsing data to ng-model not working

angularjs

angularjs-ng-repeat

angular-ngmodel